@charset "utf-8";

h3.leadtxt { font-size: 24px; padding: 0 0 30px; text-align: center; font-weight: bold; }

.title { text-align: center; padding: 0 0 50px; }
.title img { display: block; margin: 0 auto; }
.title span { display: block; font-size: 16px; letter-spacing: 3px; }

.bnr { padding: 0 0 20px; }
.bnr p { font-size: 14px; line-height: 260%; padding: 15px 0 0; }

.fl-center{ justify-content: center; }

.example { padding: 0 0 110px; }
.example h4 { font-size: 22px; }
.example ul { display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; padding: 20px 0 0; }
.example ul li { width: calc((100% - 40px) / 2); background: #f6f6f6; text-align: center; }
.example.boxone ul li { float: none; background: none; }
.example.boxone h4 { text-align: center; }
.example ul li h6 { font-size: 14px; color: #797979; padding: 25px 0 3px; }
.example ul li h5 { font-size: 20px; font-weight: bold; }
.example ul li span { display: block; font-size: 14px; padding: 7px 0 35px; color: #797979; }
.example .youtube { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.example .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#fv { background: url(../images/price_new/fv.jpg) center top no-repeat;}
#fv h2 span { color: #fff;}

#about { padding: 150px 0; margin: 85px 0 0; background: url(../images/price_new/fv2.jpg) no-repeat center top; text-align: center; background-size: cover; }
#about h3 { font-size: 30px; color: #fff; font-weight: bold; line-height: 140%; }

.balloon { margin-top: -170px; }
.balloon li { width: calc((100% - 60px) / 3); float: left; margin: 0 30px 0 0; position: relative; padding: 30px 25px 20px 25px; box-sizing: border-box; background: url(../images/price_new/balloon_01.jpg) center center; background-size: cover; text-align: center; }
.balloon a { display: block; }
.balloon li:nth-of-type(2) { background: url(../images/price_new/balloon_02.jpg) center center; background-size: cover; }
.balloon li:nth-of-type(3) { background: url(../images/price_new/balloon_03.jpg) center center; background-size: cover; }
.balloon li:last-of-type { margin: 0; }
.balloon li::before { content: ""; position: absolute; display: block; width: 50px; height: 60px; border-top: 20px solid #000; border-right: 25px solid transparent; border-left: 25px solid transparent; box-sizing: border-box; right: 0; left: 0; bottom: -60px; margin: auto; }
.balloon h4 { color: #d20f0f; background: #fff; border-radius: 50px; font-size: 18px; padding: 2px 0; }
.balloon dl { }
.balloon dt { font-size: 48px; color: #fff; font-weight: bold; font-style: italic; border-bottom: 1px solid #fff; }
.balloon dt span { font-size: 73px; font-style: italic; font-weight: bold; font-family: initial; letter-spacing: -17px; padding: 0 20px 0 0; }
.balloon dd { padding: 15px 15px 0; font-size: 14px; color: #fff; }

#reference { padding: 130px 0 25px; }

#plan { color: #fff; padding: 0 0 100px; }
#plan .light_plan { background: url(../images/price_new/bg_02.jpg) no-repeat center top #000; }
#plan .regular_plan { background: url(../images/price_new/bg_03.jpg) no-repeat center top #000; }
#plan .original_plan { background: url(../images/price_new/bg_04.jpg) no-repeat center top #000; }



#plan .presentation_plan.list { color: #000; padding: 100px 0 0; }
#plan .seminar_plan.list { color: #000; padding: 0; }
#plan .presentation_plan .bg,
#plan .seminar_plan .bg { position: relative; padding: 160px 0 0; }
#plan .presentation_plan .bg:before { content: ""; width: 95%; height: 430px; background: url(../images/price_new/bg_09.jpg) no-repeat center / cover; position: absolute; top: 0; left: 0; }
#plan .seminar_plan .bg:before { content: ""; width: 95%; height: 430px; background: url(../images/price_new/bg_08.jpg) no-repeat center top / cover; position: absolute; top: 0; right: 0; }
#plan .presentation_plan .inner,
#plan .seminar_plan .inner { position: relative; }
#plan .presentation_plan .plan_title,
#plan .seminar_plan .plan_title { text-align: center; padding: 0 0 40px; }
#plan .presentation_plan .plan_title span,
#plan .seminar_plan .plan_title span { display: block; padding: 10px 0 0; }
#plan .presentation_plan .triangle,
#plan .seminar_plan .triangle { font-size: 34px; font-weight: bold; font-style: italic; color: #fff; padding: 0 0 0 30px; position: relative; margin: 0 0 40px 0; }
#plan .presentation_plan .triangle:before,
#plan .seminar_plan .triangle:before { content: ""; display: block; width: 14px; height: 7px; border-left: 20px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; box-sizing: border-box; left: 0; top: 0; bottom: 0; margin: auto 0; position: absolute; }
#plan .presentation_plan .leadtxt,
#plan .seminar_plan .leadtxt { text-align: center; font-size: 24px; line-height: 180%; font-weight: 500; }
#plan .presentation_plan h4,
#plan .seminar_plan h4 { text-align: center; }



#plan .list { padding: 150px 0 0; background-size: 100% auto; }
#plan h3 { padding: 0 0 35px; }
#plan h3 img { float: left; }
#plan h3 span { float: left; font-size: 22px; padding:39px 0 0 22px; display: block; }
#plan .example ul li h5 { color: #000; }

#plan .subject { width: 1000px; margin: 0 auto; text-align: center; color: #000; }
#plan .subject h4 { line-height: 40px; border-top: 2px solid; border-bottom: 2px solid; font-size: 20px; font-weight: bold; }
#plan .subject p { font-size: 18px; line-height: 200%; padding: 30px 0 0; }

#voice { padding: 115px 0 70px; background: #f6f6f6; }
#voice li { float: right; width: 480px; }
#voice li:first-child { float: left; padding: 0 0 60px; }
#voice li h4 { padding: 30px 0 0; font-size: 24px; font-weight: bold; }
#voice li h4 span { font-size: 16px; display: block; padding: 0 0 10px; }
#voice li p { font-size: 18px; padding: 7px 0 0; }
#voice li .view { background: #fff; text-align: center; height: 228px; display: table; padding: 0 20px; width: 440px; }
#voice li .view h5 { font-size: 20px; display: table-cell; vertical-align: middle; font-weight: bold; }


#main_contact { text-align: center; font-family: "Hiragino Kaku Gothic Pro","Meiryo","メイリオ","Osaka","ＭＳ Ｐゴシック","MS P Gothic","Arial",sans-serif; padding: 120px 0 0 0;}
#main_contact .inner { width: 790px; margin: 0 auto;}
#main_contact .title { padding: 0 0 40px; }
#main_contact p { font-size: 14px;}
#main_contact .tell_box { border: 5px solid #eeeeee; padding: 20px 0 25px;}
#main_contact .tell_box h4 { font-size: 21px; font-weight: bold;}
#main_contact .tell_box p.number a { font-family: Helvetica; font-size: 48px; font-weight: bold; line-height: 130%;}
#main_contact .tell_box p.number a img { padding: 0 10px 10px 0;}
#main_contact .tell_box p.time span { background: #383838; color: #fff; padding: 0 10px; display: inline-block; *display: inline; *zoom: 1; margin: 0 10px 0 0; font-size: 12px;}
#main_contact .howto { background: #eeeeee; padding: 20px 0; font-size: 14px; font-weight: bold; margin: 35px 0 70px;}
#main_contact .howto span { color: #f0000f;}
#main_contact table { width: 85%; margin: 0 auto; font-size: 14px;}
#main_contact table tr th { width: 195px; text-align: left; padding: 20px 2% 10px 0; vertical-align: top; margin: 0 0 10px; font-weight: bold;}
#main_contact table tr th span { color: #f0000f;}
#main_contact table tr td { text-align: left; padding: 10px 0;}
#main_contact table tr td input[type="text"],
#main_contact table tr td textarea { width: 96%; border: none; background: #f3f3f3; padding: 10px 2%;
border-radius: 4px; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px;}
#main_contact input[type="submit"] { width: 260px; height: 50px; line-height: 50px; color: #fff; font-size: 14px; background: #dd0016; margin: 70px 0 140px;
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;}
#main_contact .tell_box p.alert { color: red; padding: 20px 0 0; }



#contact { width: 790px; margin: 0 auto; }
#contact h3 { font-size: 30px; text-align:center; }
#contact p.lead { font-size: 14px; padding: 30px; text-align:center;}
#contact #contact-form .tel h4 { font-size: 21px; }
#contact #contact-form .tel { text-align: center; border: 5px solid #e9e9e9; padding: 30px 0; }
#contact #contact-form .tel p span { font-size: 34px; font-weight: bold; }

#contact-form { padding: 0 0 50px 0;  }
#contact-form h3#contact-h { font-size: 20px; background: url(../images/contact/h_01.png) no-repeat center top; text-align: center; padding: 70px 0 0;}
#contact-form h3#catalog-h { font-size: 20px; background: url(../images/catalog/h_01.png) no-repeat center top; text-align: center; padding: 70px 0 0;}


input[type="text"],
textaera	{ border: 1px solid #b5b5b5; }
input[type="submit"] { -webkit-appearance: button; cursor: pointer; padding: 0; border: none; }

/* ------------------------------------------------------------ forms */

textarea,
input[type="text"] { background: #f3f3f3; border: none; padding: 10px; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; }
textarea { width: 96%; }
input[type="text"] { width: 96%; }

#form { background: #fff; padding: 45px 0 45px; }
#form h4 { font-size: 25px; padding: 20px 0; text-align: center;}
#form #notice {  font-weight: bold; text-align: center; padding: 25px 0; background: #e9e9e9; }
#form #notice span,
#form table th span { color: #ec0000; }
#form table { width: 100%; margin: 30px 0 0; }
#form table th { font-weight: bold; vertical-align: top; text-align: left; width: 200px; padding: 25px 0 0; font-size: 14px;}
#form table td { padding: 15px 0; font-size: 14px;}
#form table td span { font-size: 12px; }
#form table td label { display: inline-block; *display: inline; *zoom: 1; width: 45%; }
#form table td p { font-size: 14px; }

#form .submit { text-align: center; padding: 30px 0 40px; }
#form .submit input[type="submit"],
#form .submit .back { display: inline-block; *display: inline; *zoom: 1; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: none; color: #fff; width: 260px; height: 50px; line-height: 50px; margin: 5px; font-size: 14px; font-weight: bold; vertical-align: top; }
#form .submit input[type="submit"] { background: #dd0016; }
#form .submit .back { background: #ccc; }

#form .alert { padding: 60px; }
#form .alert span { display: block; color: #ec0000; font-size: 16px;}
#form table.confirm th { padding: 10px 0; }
#form table.confirm td { padding: 10px 0 30px; }

#entry { margin-top: 50px; padding: 50px 0; text-align: center; }
#entry .g-btn { padding: 30px 0 0; }
#entry h4 { font-size: 25px; padding: 20px 0; text-align: center;}
#entry .thanks { font-size: 18px; text-align: center; }


/* ------------------------------------------------------------ studio */
#studio{ padding-bottom: 150px; }
.studio__main-image { text-align: center; }
.studio__main-image img { width: 100%; height: auto; }
.studio__wrap { padding-top: 100px; }
.studio__heading { font-weight: 500; font-size: 34px; line-height: 49px; letter-spacing: 0.05em; font-weight: 700; text-align: center; }
.studio__block{ max-width: 1480px; margin: 0 auto; padding: 0 25px; box-sizing: border-box; }
.studio__intro { display: flex; justify-content: space-between; margin: 100px auto; }
.studio__intro-heading { font-weight: 700; font-size: 34px; line-height: 49px; letter-spacing: 0.05em; }

.studio__image img { width: 100%; height: auto; }
.studio__intro-text { box-sizing: border-box; padding-left: 65px; }
.studio__intro-inner { width: 524px; margin: 0; }
.studio__text { margin-top: 30px; line-height: 32px; }
.studio__gallery { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; row-gap: 30px; }
.studio__gallery-image img { width: 100%; height: auto; }




/* ------------------------------------------------------------ mobile */

@media only screen and (max-width:640px){

h3.leadtxt { font-size: 18px; }

#fv { background-size: cover;}

.title { text-align: center; padding: 0 0 30px; }
.title img { height: 40px; width: auto; }
.title span { font-size: 14px; }

.bnr { padding: 0 0 30px; }
.bnr img { width: 100%; height: auto; }
.bnr p { font-size: 14px; line-height: 200%; }

.example { padding: 0 0 40px; }
.example h4 { font-size: 18px; }
.example ul { gap: 30px; padding: 10px 0 0; }
.example ul li { width: 100%; float: none; }
.example ul li:nth-child(2n) { float: none; }
.example ul li h6 { padding: 25px 0 3px; }
.example ul li h5 { font-size: 20px; }
.example ul li span { padding: 7px 0 35px; }


#fv { background: url(../images/price_new/fv.jpg) center top no-repeat;}
#fv h2 span { color: #fff;}

#about { padding: 50px 0 60px; margin: 30px 0 0; background: url(../images/price_new/fv2.jpg) repeat center center; text-align: center; }
#about h3 { font-size: 16px; line-height: 170%; }
#about p { font-size: 18px; line-height: 200%; padding: 20px 0 0; }

.balloon { margin-top: -40px; }
.balloon li { width: 100%; float: none; margin: 0 0 40px 0; padding: 25px 20px 15px 20px; }
.balloon h4 { font-size: 16px; }
.balloon dt { font-size: 26px; }
.balloon dt span { font-size: 40px; letter-spacing: -8px; padding: 0 10px 0 0; }
.balloon dd { padding: 10px 15px 0; font-size: 12px; }
.balloon li::before { content: ""; width: 20px; height: 30px; border-top: 15px solid #000; border-right: 20px solid transparent; border-left: 20px solid transparent; bottom: -30px; margin: }

#reference { padding: 60px 0 25px; }

#plan { padding: 0 0 50px; }
#plan .list { padding: 120px 0 0; background-size: 100% auto; }
#plan h3 { padding: 25px 0; }
#plan h3 img { float: none; }
#plan h3 span { float: none; font-size: 18px; padding: 5px 0 0; }

#plan .subject { width: 94%; }
#plan .subject h4 { line-height: 30px; font-size: 18px; }
#plan .subject p { font-size: 16px; padding: 20px 0 0; text-align: left; }


#plan .presentation_plan .bg:before { content: ""; width: 100%; height: 20%; position: absolute; top: 0; left: 0; }
#plan .seminar_plan .bg:before { content: ""; width: 100%; height: 20%; position: absolute; top: 0; right: 0; }
#plan .presentation_plan .plan_title { padding: 0 0 30px; }
#plan .presentation_plan .plan_title img { width: 90%; }
#plan .presentation_plan.list { padding: 50px 0 0; }
#plan .presentation_plan .triangle { font-size: 22px; padding: 0 0 0 7%; margin: 0 0 15px 0; }
#plan .seminar_plan .triangle { font-size: 22px; padding: 0 0 0 7%; margin: 0 0 5px 0; }
#plan .presentation_plan .bg,
#plan .seminar_plan .bg { padding: 22% 0 0; }
#plan .presentation_plan .triangle:before,
#plan .seminar_plan .triangle:before { content: ""; border-left: 15px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent;s }
#plan .presentation_plan .leadtxt,
#plan .seminar_plan .leadtxt { font-size: 18px; line-height: 170%; }
#plan .presentation_plan .leadtxt{padding: 90px 0 25px;}

#voice { padding: 70px 0 40px; }
#voice li { float: none; width: 100%; margin: 0 0 40px; }
#voice li:first-child { float: none; padding: 0; }
#voice li h4 { padding: 30px 0 0; }
#voice li h4 span { font-size: 14px; padding: 10px 0 0 5px; }
#voice li p { font-size: 16px; padding: 7px 0 0; }
#voice li .view { height: 150px; padding: 0 3%; width: 94%; }
#voice li .view h5 { font-size: 18px; }

#main_contact { padding: 70px 0 0; }
#main_contact .inner { width: 94%;}
#main_contact h3 { padding: 20px 0 30px;}
#main_contact .tell_box h4 { font-size: 18px;}
#main_contact .tell_box p.number a { font-size: 32px;}
#main_contact .tell_box p.number img { width: 20px; height: auto;}
#main_contact .tell_box p.time span { display: block; margin: 0 3% 5px;}
#main_contact .howto { margin: 20px 0 30px; padding: 15px; text-align: left;}
#main_contact table { width: 100%;}
#main_contact table tr th { width: 100%; padding: 10px 0; vertical-align: middle; margin: 0; display: block; float: left;}
#main_contact table tr td { display: block; padding: 10px 0; float: left; width: 100%;}
#main_contact table tr td input[type="text"] { margin: 0;}
#main_contact input[type="submit"] { margin: 20px 0 80px;}


#contact { width: inherit; margin: 0 auto; }
#contact h3 { font-size: 30px; text-align:center; }
#contact p.lead { font-size: 14px; padding: 30px; text-align:center;}
#contact #contact-form .tel h4 { font-size: 21px; }
#contact #contact-form .tel { text-align: center; border: 5px solid #e9e9e9; padding: 30px 0; }
#contact #contact-form .tel p span { font-size: 30px; font-weight: bold; }

#contact-form { padding:  0; background: #fff;}
#contact-form h3#contact-h { font-size: 20px; background: url(../images/contact/h_01.png) no-repeat center top; background-size: 140px auto; text-align: center; padding: 50px 0 0; margin-bottom: 30px;}
#contact-form h3#catalog-h { font-size: 20px; background: url(../images/catalog/h_01.png) no-repeat center top; background-size: 140px auto; text-align: center; padding: 50px 0 0; margin-bottom: 30px;}


textarea,
input[type="text"] { width: 96%; padding: 10px 2%;}

#form { padding: 25px 3% 45px; }
#form #notice { padding: 15px 3%; }
#form table th { width: 100%; display: block; font-size: 16px; line-height: 130%;}
#form table td { display: block; padding: 10px 0 0;}
#form table td p { font-size: 12px; }
#form table td label { padding: 0 0 10px;}


#form .submit input[type="submit"],
#form .submit .back { display: inline-block; *display: inline; *zoom: 1; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: none; color: #fff; width: 260px; height: 50px; line-height: 50px; margin: 5px; font-size: 14px; font-weight: bold; vertical-align: top; }
#form .submit input[type="submit"] { background: #dd0016; }
#form .submit .back { background: #ccc; }

#form .alert { padding: 20px 0; }
#form .alert span { display: block; color: #ec0000; }
#form table.confirm th { padding: 10px 0; }
#form table.confirm td { padding: 10px 0 30px; }


/* ------------------------------------------------------------ studio */
.studio__wrap { padding-top: 40px; padding-bottom: 60px; }
.studio__heading { font-size: 20px; line-height: 29px; }
.studio__block{ width: 90%; padding: 0; }
.studio__intro { max-width: none; display: block; margin: 45px auto; }

.studio__intro-heading { font-size: 20px; line-height: 29px; text-align: center; }
.studio__intro-image { max-width: none; }
.studio__intro-text { margin-top: 30px; padding-left: 0; }
.studio__intro-inner { width: auto; }
.studio__text { margin-top: 20px; line-height: 24px; }
.studio__gallery{ display: block; }
.studio__gallery-item { margin-top: 30px; }


}





@media only screen and (orientation : portrait) { 
	#navigation 			{ position: fixed; top:0; margin: 0 0 0; right: 0; left: 0; }
}