﻿@charset "utf-8";/*--------
--------*/
/* RESET CSS */
article, aside, details, figcaption, figure, footer, header, hgroup, img, menu, nav, section { display: block;}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0;padding: 0;border: 0;font: inherit;vertical-align: baseline;}
body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:after, blockquote:before, q:after, q:before { content: '';content: none;}table { border-collapse: collapse;border-spacing: 0;}table + p { margin-top: 2rem;}img { margin: 0 auto;padding: 0;max-width: 100%;}* { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}a[href^="tel:"] { pointer-events: none;text-decoration: none;color: #666;}
/*--------Basic--------*/
html { font-size: 62.5%;}
body { width: 100%;font-size: 2.2rem;color: #3f3f3f;font-weight: 500;line-height: 1.7;-webkit-font-feature-settings: 'palt'1;font-feature-settings: 'palt'1;font-family: -apple-system-body, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "游ゴシック  Medium", "Yu Gothic Medium", "メイリオ", meiryo, sans-serif;background: #eee;-webkit-text-size-adjust: 100%;}
#body_wrap { /*width: 960px;*/margin: 0 auto;background: #000;box-shadow: 0 0 5rem rgba(0,0,0,0.2);}
.pc { display: block;}
.sp { display: none;}
.clearfix:before, .clearfix:after { content: " ";display: table;}
.clearfix:after { clear: both;}
.clearfix { *zoom: 1;}
.img_right { float: right;padding: 0 0 2rem 2rem;}
.img_left { float: left;padding: 0 2rem 2rem 0;}
.flex { display: flex;flex-wrap: wrap;justify-content: center;align-items: flex-start;}
.flex02 { display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
/*.flex div { width: 100%;margin: 0;}*/
.flex > p + p { margin-top: 0;}
.flex p { margin: 0 auto 2rem;padding: 1rem;font-size: 80%;text-align: center;color: #fff;width: 95%;}
.flex + .flex { margin: 2rem 0 0;}
.flex_inner.three ,.flex_inner.four{margin-top: 2rem;}
.caption { width: 100%;padding: 1rem;margin: 0;color: #110604;font-size: 1.8rem;font-weight: bold;line-height: 1.4;}
.caption_center { width: 100%;padding: 1rem;margin: 0 ;color: #fff;background:#7c0505;text-align: center;font-size: 2.4rem;font-weight: bold;line-height: 1.4;}
/* Font */
h1 { font-weight: normal !important;font-feature-settings: "palt"1;}
.u { text-decoration: underline;}
.b { font-weight: bold;}
.r { color: #d00;}
.y { color: #f4f745;}
.bl { color: #2D488F;}
.wht { color: #fff;}
.gradation_g { color: #f9db7f;background: -webkit-linear-gradient(0deg, #f9db7f, #fff8c8, #f9db7f);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;font-family: 'Gothic MB101 Heavy', sans-serif;}
.mark { background: linear-gradient(transparent 50%, #ffff84 50%);}
.txt_c { text-align: center;}
.txt_r { text-align: right;}
.txt_l { text-align: left;}
.xxsmall { font-size: 30%;}
.xsmall { font-size: 60%;}
.small { font-size: 80%;}
.large { font-size: 110%;}
.xlarge { font-size: 140%;}
.xxlarge { font-size: 160%;}
.serif { font-family: 游明朝, "Yu serif", Yuserif, "Hiragino serif ProN", "Hiragino serif Pro", HGS明朝E, メイリオ, Meiryo, serif;}
.bg_b { background: #000;}
.bg_r { background: #7c0005;}
.bg_wh { background: #fff;}
p + img, img + p, p + p { margin-top: 2rem;}
/*--------Header--------*/
header { width: 100%;margin: 0 auto;color:#000;background:url(../img/hws_opt_img2_bg.jpg)no-repeat center bottom/cover}
header h1{background: url(../img/intro_tomita_header.jpg)no-repeat center bottom/cover;padding: 6rem 0;}
header h1 img{width: 340px;}
/*--------Section / sub_head / sec_inner--------*/
/* 共通 */
section { padding: 5rem 0;}
.sub_head { 
	color: #fffbf1;
    font-size: 5rem;
    line-height: 1.3;
    text-align: center;
    font-family: "Gothic MB101 Heavy", "A-OTF ゴシックMB101 Pr6N";
    -webkit-font-feature-settings: 'palt'1;
    font-feature-settings: 'palt'1;
    margin: 0 auto 4rem;
}
.sec_inner{width: 960px;margin: 0 auto;}
/*--------　list / box --------*/
ul {list-style: none;}
ul.list4 { margin: 2rem auto 1rem;}
ul.list4 li { position: relative;padding:1rem 0 1rem 3.5rem;line-height: 1.2;font-weight: bold;font-family: "Gothic MB101 Heavy", "A-OTF ゴシックMB101 Pr6N";text-shadow: 1px 1px 0px #fefbf6;}
ul.list4 li:last-child{border-bottom: none;}
ul.list4 li:before {content: '';display: inline-block;width: 25px;height: 25px;background-image: url(../img/base/list_icon1.png);top: 50%;left: 0;position: absolute;transform: translateY(-50%);}
/*-------- form --------*/
#scfooter { display: none;width: 100%;margin: 0 auto;padding: 0 0 1.5rem;bottom: 0px;left: 0px;z-index: 1000;position: fixed;background: #c13d3c;border-top: 3px solid #fff292;}
#form_header, .form { width: 100%;margin: 0 auto;padding: 1.5rem 0;background: #c13d3c;}
#form_header p, .form p { line-height: 1.2;}
.form_inner { width: 960px;margin: 1.5rem auto 0;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;justify-content: space-between;}
/* .flex_inner{ background: #fcf8ec;width: 48%;padding: 2rem;box-sizing: border-box;text-align: center;margin: 0 auto 2rem;border: 4px double #7c0505;font-family: "Gothic MB101 Heavy", "A-OTF ゴシックMB101 Pr6N";color: #7c0505;} */
.form_left { background: #fff;border-radius: 5px;display: table;width: 70%;height: 50px;padding: .5rem;margin-right: 2rem;transition: all 0.2s;color: #7c0505;}
.form_left:hover { background: #fbffbd;-webkit-box-shadow: 0 0 0 4px #ffd161 inset;box-shadow: 0 0 0 4px #ffd161 inset;}
.form_left .form_must { display: table-cell;vertical-align: middle;width: 10%;}
.form_left .form_must span { display: block;padding: 0 .5rem;margin-right: 1rem;background: #cf1414;color: #fff;font-size: 1.8rem;font-weight: bold;text-align: center;}
/*-------- merit --------*/
.merit_wrap{width: 960px;margin: 0 auto;}
.merit {background: url('../img/merit_bg.jpg') center/cover;}
.merit .flex02 {margin-top: 2rem;}
/*-------- profile --------*/
.profile {
	background: url('../img/intro_tomita_bg01.jpg') center/cover;
	padding: 0;
	/* border-top: 4px solid #daaa31; */
	/* border-bottom: 4px solid #daaa31; */
	/* background: linear-gradient(to right, #43C6AC 0%, #d9e653 100%); */
	border-top: 6px solid;
    border-image: linear-gradient(to right, #ffe29c 0%, #ae7c03 100%);
    border-image-slice: 1;
}
.instructor {
	position: relative;
	width: 960px;
	margin: 0 auto;
}
/* .instructor::before{content: url(../img/hws_opt_img2_1.png);width: 100%;height: 100%;position: relative;top: 0;left: 70px;} */
.instructor_inner{margin: 0 auto;}
.instructor_name span{ background: #d11019;color: #fff;font-size: 90%;padding: .5rem 2rem;border-radius: 50px;}
.instructor_name img{margin: 1rem 0 0;}
/*-------- profile_bottom --------*/
.profile_bottom{background:#c1bba3;}
.profile_bottom_wrap{width: 960px;margin: 0 auto;}
.profile_bottom img{width: 100%;}
.profile_bottom .caption_center{width: 100%;padding: 1rem 1rem 1rem;margin: 0 auto;}
.profile_bottom .flex {justify-content: space-between;align-items: stretch;}
.profile_bottom .flex div {width: 32%;background: #7c0505;}
/*-------- reccomend --------*/
.reco{background: url(../img/intro_tomita_bg02.jpg)no-repeat center bottom/cover;padding: 5rem 0;}
.reco .sub_head{color: #3b3620;font-family: "Gothic MB101 Heavy", "A-OTF ゴシックMB101 Pr6N";}
.reco_box{width: 40%;}
.reco_wrap{width: 960px;margin: 0 auto;}
.reco_wrap .flex p {height: 130px;vertical-align: middle;background: #3b3620;display: grid;}
/*-------- other --------*/
.other{background: url(../img/intro_tomita_bg03.jpg)no-repeat center bottom/cover;padding: 5rem 0;}
/* .other_wrap{width: 960px;margin: 0 auto;} */


/* #slide {
    background: url(../img/slider.jpg);background-position: 0px 0px;height: 280px;width: 100%;position: relative;-webkit-animation: SlideAnime 40s linear infinite;} */
@-webkit-keyframes SlideAnime {
  0%    { background-position:0px 0px;}
  100%  { background-position:-2160px 0px;}
}
/*-------- button:hover --------*/
@-webkit-keyframes hvr-wobble-vertical { 16.65% { -webkit-transform: translateY(8px);transform: translateY(8px) }
    33.3% { -webkit-transform: translateY(-6px);transform: translateY(-6px) }
    49.95% { -webkit-transform: translateY(4px);transform: translateY(4px) }
    66.6% { -webkit-transform: translateY(-2px);transform: translateY(-2px) }
    83.25% { -webkit-transform: translateY(1px);transform: translateY(1px) }
    100% { -webkit-transform: translateY(0);transform: translateY(0) }
}
@keyframes hvr-wobble-vertical { 16.65% { -webkit-transform: translateY(8px);transform: translateY(8px) }
    33.3% { -webkit-transform: translateY(-6px);transform: translateY(-6px) }
    49.95% { -webkit-transform: translateY(4px);transform: translateY(4px) }
    66.6% { -webkit-transform: translateY(-2px);transform: translateY(-2px) }
    83.25% { -webkit-transform: translateY(1px);transform: translateY(1px) }
    100% { -webkit-transform: translateY(0);transform: translateY(0) }
}
.hvr-wobble-vertical { vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;}
.hvr-wobble-vertical:active, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:hover { -webkit-animation-name: hvr-wobble-vertical;animation-name: hvr-wobble-vertical;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;-webkit-animation-iteration-count: 1;animation-iteration-count: 1;}
.form{background: #000;padding: 3rem 0;}
.btn {width: 860px;display: block;margin: 6rem auto;border-radius: 40px;box-shadow: 0px 2px #318400;background: #00ab08;background: -moz-linear-gradient(-45deg, #7dbf01 0%, #00ab08 100%);background: -webkit-linear-gradient(-45deg, #7dbf01 0%,#00ab08 100%);background: linear-gradient(135deg, #7dbf01 0%,#00ab08 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27a80d', endColorstr='#0c9b5f',GradientType=1 );text-decoration: none;transition: all .3s;line-height: 1.4;}
.btn p {padding: 2rem;color: #fff;font-size: 3.2rem;font-weight: bold;text-align: center;}
.btn:hover{filter: brightness(120%);}
.move {animation: move 2s infinite;}
@keyframes move {0% {transform: translate(2px, 0px);}
	5% {transform: translate(-2px, 0px);}
	10% {transform: translate(2px, 0px);}
	15% {transform: translate(-2px, 0px);}
	20% {transform: translate(2px, 0px);}
	25% {transform: translate(-2px, 0px);}
	30% {transform: translate(0px, 0px);} }
/*--------footer_attention2--------*/
p + ul { margin-top: 2rem;}
/*--------footer--------*/
footer { width: 100%;padding: 5rem 0;background: #fefbf4;}
#footer_inner { width: 960px;margin: 0 auto;font-size: 1rem;}
#footer_inner .logo { width: 25%;margin: -1rem auto 3rem;}
#footer_inner ul { display: flex;justify-content: center;}
#footer_inner li { padding: 0 2rem;border-left: 1px solid #ccc;}
#footer_inner li:first-child { padding-left: 0;border: none;}
#footer_inner p { padding-top: .5rem;text-align: center;}
#footer_inner a { text-decoration: none;}
#footer_inner a:link, #footer_inner a:visited, #footer_inner a:hover, #footer_inner a:active { color: #989898;}
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
【 SP 】
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (max-width:768px) { /*--------Basic--------*/
    body { width: 100%;font-size: 4.5vw;}
    a[href^="tel:"] { pointer-events: auto;text-decoration: underline;color: #00e;}
    #body_wrap { width: 100%;}
    /* Float */
    .img_right, .img_left { float: none;width: 80%;padding: 0 0 2rem;margin: 0 auto;}
    .pc { display: none;}
    .sp { display: block;}
    .xxsmall { font-size: 60%;}
    .xsmall { font-size: 70%;}
    .small { font-size: 80%;}
    .large { font-size: 110%;}
    .xlarge { font-size: 130%;}
    .xxlarge { font-size: 150%;}
    .sp_x { flex-wrap: wrap;}
    .sp_x div { width: 50%;}
    .flex p { margin: 0 auto;}
	.caption{font-size:4.3vw;}
	.caption_center{font-size:4.3vw;}
    /*--------Section / sub_head / sec_inner--------*/
    section { padding: 7vw 0;}
    .sub_head { width: 100%;margin: 0 auto 1.5rem;font-size: 4.8vw;}
    .sec_inner { width: 95%;}
    /*--------Header--------*/
    #header_pri p { font-size: 5vw;}
	.header_pri_inner { width: 95%;}
	header h1 img { width: 44%;margin: 0 auto;}
	header h1 {padding: 6vw 0;}
	/*-------- merit --------*/
	.merit {padding: 7vw 0 6vw;}
	/* .merit img{width: 95%;} */
	.merit_wrap{width: 95%;}
	.merit .flex {margin: 0;line-height: 1.2;}
	.merit .flex img{width: 15%;}
	.merit_wrap .flex_inner{width: 49%;}
	.merit .flex_inner::before {border-top: 60px solid #7c0505;border-right: 80px solid transparent;}
	.merit .one::after,.merit .two::after,.merit .three::after,.merit .four::after {top: 0;left: 8px;font-size: 6vw;}
	.flex_inner.three, .flex_inner.four {margin-top: 2vw;}
	.merit .flex02 {margin-top: 3vw;}
	/*-------- profile --------*/
	.instructor_name{display: none;}
	.instructor {width: 95%;}
	.instructor_name img {width: 20%;}
	.instructor::before {content: none;}
	.instructor p + img, img + p, p + p {margin-top: 0;}
	ul.list4 {margin: 0 auto;display: inline-block;padding: 1rem 2rem;}
	ul.list4 li {font-size: 100%;}
	/*-------- profile_bottom --------*/
	.profile_bottom{background: #f4f2ec;}
	.profile_bottom_wrap{width: 100%;}
	.profile_bottom .flex{width: 80%;margin: 0 auto;}
	.profile_bottom .caption_center{ width: 100%;}
	.profile_bottom .flex div { width: 1000%;}
	/*-------- reccomend --------*/
	.reco_wrap{width: 95%;}
	/* .reco_box{width: 80%;margin: 4vw auto;}
	.reco_box img{height: 70vw;}
	.reco_wrap .flex p {height: auto;} */
	.reco {padding: 6vw 0;}
	/* #slide {
	background: url(../img/slider_sp.jpg);height: 120px;width: 100%;} */
	/*-------- other --------*/
	.other_wrap {width: 95%; margin: 0 auto;}
	.other {padding: 6vw 0;}
	/*--------btn--------*/
	.btn {
		width: 90%;
		margin: 0 auto;
	}
	.btn p{font-size:5.2vw;padding: 3.5vw;}
    /*--------footer-------*/
    footer { padding: 4vw 0;}
    #footer_inner { width: 90%;}
    #footer_inner p { text-align: center;}
	#footer_inner .logo { width: 55%;margin: 0 auto 2rem;}
}