@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Serif+JP:400,700&subset=japanese');

body {margin: 0px; padding: 0; font-size: 14px; font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1.5; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; color: #A6A6A6; background: #000;}
.EN {font-family: 'Lato', sans-serif; font-weight: 400;}
.ENB {font-family: 'Lato', sans-serif; font-weight: 700;}
.fixed { position: fixed; top: 0; width: 100%; z-index: 1000; background: #4D4D4D;}
.fixed #headArea {margin-bottom: 0;}

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 736px) {
    #page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

/* 画像 */
.alignleft	{float: left; margin-right: 20px; margin-bottom: 20px;}
.alignright	{float: right; margin-left: 20px; margin-bottom: 20px;}
.aligncenter {clear: both; display: block; margin: 25px auto;}
.mar75{margin-top: 75px;}

.clone-nav {position: fixed;top: 0;left: 0;z-index: 2;width: 100%;transition: .3s;transform: translateY(-100%);}
.is-show {transform: translateY(0);}
.clone-nav {text-align: center; width: 100%; background: #222;}
.clone-nav ul#naviH {text-align: center;}
.clone-nav ul#naviH li {list-style: none; text-align: center; display: inline-block;}
.clone-nav ul#naviH li a {list-style: none; display: inline-block; text-align: center; color: #FFF; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; font-size: 17px; line-height: 25px; margin: 0; padding: 10px 20px;}
.clone-nav ul#naviH li a:hover {color: #FFF; background: #2E4791;}

.ratioBox {position: relative; width: 100%; height: auto;}
.ratioBox1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratioBox2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratioBox3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratioBox4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioBoxInner {position: absolute; top: 76%; left: 45%;}

#header {width: 100%; padding: 20px 0 0; margin: 15px auto 0; position: relative; border-top: 5px solid #4D4D4D;}
#header h1 {font-size: 12px; margin: 10px 0; font-weight: normal; width: 250px; float: left; margin-top: -53px;}
#logo {width: 120px; margin: 0 auto 20px;}
#headContact {width: 260px; float: right; text-align: center; font-size: 12px; font-weight: bold; line-height: 20px; margin-top: -101px;}
#headContact .inner {border: 1px solid #FFF; background: url("image/bg_btn.png") repeat-x; padding: 10px 10px 10px; color: #FFF;}
@media screen and (max-width: 710px) {
    #header h1 {width: 200px; margin-top: -53px;}
    #logo {width: 100px;}
    #headContact {width: 210px;}
}
@media screen and (max-width: 580px) {
    #header h1 {width: 45%; margin: 0 auto 10px; float: none;}
    #logo {width: 100px; margin: 0 auto 10px;}
    #headContact {width: 230px; margin: 0 auto 10px; float: none;}
}

#headArea {width: 100%; margin-bottom: 75px; padding: 0; margin: 0 auto 0; position: relative; background: #4D4D4D;}
.drawer-toggle {display: none;}
.drawer-navbar {}
.drawer-container {width: auto;}
.drawer-nav {text-align: right;}
ul.drawer-menu {padding:0; margin: 0; list-style: none;}
.drawer-menu li {text-align: center; padding: 10px 0; margin: 0 20px; display: inline-block; line-height: 20px; border-top: 3px solid #BFBFBF;}
.drawer-menu li a.drawer-menu-item {text-align: center; color: #BFBFBF; font-weight: 700;}
.drawer-menu li a.drawer-menu-item:hover  {color: #0079AC; display: block;}
.drawer-menu li.spnav {display: none;}
@media screen and (max-width: 500px) {
    .drawer-nav {text-align: center;}
    .drawer-menu li {text-align: center; padding: 10px 0; margin: 0 5px; display: inline-block; line-height: 20px; border-top: 3px solid #BFBFBF;}
    #headArea .container {width: 100%; margin-left: 0; margin-right: 0;}
}

footer {background: #333333; padding: 0 0 40px 0; color: #FFF;}
#footer {background: #1A1A1A; padding: 30px 0;}
.footerBtm {background: #1B1464 url("image/line1.png") no-repeat center bottom; height: 10px;}
#footerLogo {width: 180px; margin: 0 auto;}
#footerLogoType {width: 360px; margin: -45px 0 0;}
#footComp {padding: 40px 0 0;}
#footComp h2 {background: url("image/bg_profile.png") center; line-height: 40px; font-size: 25px; margin-bottom: 30px; text-align: center;}
#footComp .profile {width: 380px; margin: 0 auto;}
#footComp .proL {width: 90px; float: left;}
#footComp .proR {width: 290px; float: left;}
@media screen and (max-width: 960px) {
    #footerLogoType {margin: 15px auto 0; width: 90%; max-width: 300px;}
}

.container {width: 95%; max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0;}
.smallcontainer {width: 95%; max-width: 880px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0;}
.mlr15 {margin-left: 1.5%; margin-right: 1.5%;}
.col2 {width: 47%; margin-left: 1.5%; margin-right: 1.5%; float: left;}
.col3 {width: 30.33%; margin-left: 1.5%; margin-right: 1.5%; float: left;}
.col3mana {width: 30.33%; margin-left: 1.5%; margin-right: 1.5%; float: left;}
.col3mn {width: 33.33%; float: left;}
.col3mr {width: 63.66%; margin-right: 3%; float: left;}
.col4,.col4bb {width: 22%; float: left;}
.col4 {margin-left: 1.5%; margin-right: 1.5%;}
.col4bb {border-bottom: 1px solid #222; margin: 0 0 20px; padding: 0 1.5% 20px;}
.col7 {width: 63.66%; float: left; margin: 0 1.5% 20px;}
.btn a {color: #FFF; font-weight: 700;}
.btn a:hover {color: #0079AC;}
@media screen and (max-width: 500px) {
    .col4,.col4bb {width: 47%; float: left;}
    .col3 {width: 97%; float: none;}
    .col7 {width: 97%; float: none;}
}

#main {width: 100%; max-width: 960px; margin: 0 auto;}
#read,#franchis,#partner {padding-top: 50px; margin-top: -50px;}

#read {font-size: 18px;}
#read h2 {text-align: center; font-size: 32px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #8C8C8C;}

#point .ttl {margin-bottom: 30px;}
#point h2 {max-width: 450px; width: 80%; margin: 0 auto; margin-top: 75px;}
#point .innerL,#point .innerR,#point .innerF {position: relative; color: #4D4D4D; font-size: 15px;}
#point .innerL,#point .innerR {width: 48.5%; margin-bottom: 30px; background: #FFF; border-radius: 5px;}
#point .innerL {float: left;}
#point .innerR {float: right;}
#point .innerL h3,#point .innerR h3,#point .innerF h3 {font-size: 24px; margin-left: 30px;}
#point .innerL .photo,#point .innerR .photo {width: 40%; float: left;}
#point .innerL .num,#point .innerR .num {width: 40px; height: 40px; position: absolute; top: 0; bottom: 0; margin: auto; left: calc(9% - 20px);}
#point .innerL .txt,#point .innerR .txt {margin: 20px 20px 20px 40px;;}
#point5 {background: url("image/06.jpg") no-repeat center; background-size: cover;}
#point .innerF {width: 100%; clear: both;}
#point .innerF .wrap {margin-top: -20px; background: #FFF; border: 5px solid #FFF; box-shadow:5px 5px 3px 0 rgba(0,0,0,0.7) inset;}
#point .innerF .photo {width: calc(25% - 60px); float: left; padding: 30px; box-shadow:5px 5px 3px 0 rgba(0,0,0,0.7) inset;}
#point .innerF .txt {width: calc(75% - 60px); padding: 30px; float: left;}
#point .innerF .num {width: 40px; margin: 0 auto;}
@media screen and (max-width: 960px) {
    #point .innerL .photo,#point .innerR .photo {display: none;}
    /*#point1,#point2,#point3,#point4 {height: 250px;}*/
    #point .innerL .txt,#point .innerR .txt {width: calc(100% - 40px); margin: 20px 20px 20px 47px; float: none;}
    #point .innerL .num,#point .innerR .num {width: 40px; height: 40px; position: absolute; top: 0; bottom: 0; margin: auto; left: 20px; right: auto;}
    #point1 {background: url("image/02.jpg") no-repeat center; background-size: cover;}
    #point2 {background: url("image/03.jpg") no-repeat center; background-size: cover;}
    #point3 {background: url("image/04.jpg") no-repeat center; background-size: cover;}
    #point4 {background: url("image/05.jpg") no-repeat center; background-size: cover;}
    #point .innerF .photo {width: calc(40% - 60px);}
    #point .innerF .txt {width: calc(60% - 60px);}
}
@media screen and (max-width: 960px) {
    #point .innerL,#point .innerR {width: 100%; float: none;}
    #point .innerF .photo {width: calc(100% - 60px); float: none; height: 250px;}
    #point .innerF .txt {width: calc(100% - 60px); float: none;}
}
#top03{text-align: center;}
.top03_square{position: absolute; top: 5%; left: 15%; background: #FFF; width: 65%; padding: 0.8%; border-radius: 15px;}
.img_sub1{position: absolute; top: 14.5%; left: 19%; width: 25%;}
.img_sub2{position: absolute; top: 14.5%; left: 54%; width: 25%;}

#book {text-align: center;}
#book div div a img{width: 75%}
.ttlBar {background: #1B1464 url("image/line1.png") center repeat-y;}
.ttlBar h2{max-width: 450px; width: 80%; margin: 0 auto 60px;}
#partner h2,#franchis h2,#contact h2 {text-align: center; font-size: 24px; margin-bottom: 60px;}
#partner h3,#franchis h3 {font-size: 32px; margin-bottom: 20px; width: 95%; max-width: 960px; margin-right: auto;}
#partner h3{display: flex; align-items: center; width: 370px;}
.text-line-left:before {content: ""; flex-grow: 1; height: 1px; display: block;}
.text-line-left:before {margin-left: .4em; background: #A6A6A6;}
#partner .kv {height: 385px; margin-bottom: 40px;}
#partner .txt {background: url("image/bg.png") no-repeat left top; padding: 50px 20px 50px 20px;}
#partner .txt h4 {font-size: 20px; margin-bottom: 15px; text-align: center;}
#partner .txt p {margin: 0 0 0 215px; padding-top: 15px; border-top: 1px solid #A6A6A6;}
#part1 {background: url("image/07.jpg") no-repeat center; background-size: cover;}
#part2 {background: url("image/08.jpg") no-repeat center; background-size: cover;}
#part3 {background: url("image/09.jpg") no-repeat center; background-size: cover;}
#part4 {background: url("image/10.jpg") no-repeat center; background-size: cover;}
#part5 {background: url("image/11.jpg") no-repeat center; background-size: cover;}
#part7 {background: url("image/12.jpg") no-repeat center; background-size: cover;}
#part8 {background: url("image/13.jpg") no-repeat center; background-size: cover;}
#part9 {background: url("image/14.jpg") no-repeat center; background-size: cover;}
#part10 {background: url("image/15.jpg") no-repeat center; background-size: cover;}
#part11 {background: url("image/16.jpg") no-repeat center; background-size: cover;}
#part12 {background: url("image/17.jpg") no-repeat center; background-size: cover;}
#part13 {background: url("image/18.jpg") no-repeat center; background-size: cover;}
#part14 {background: url("image/19.jpg") no-repeat center; background-size: cover;}
#partCont {padding: 55px 0; background: url("image/20.jpg") no-repeat center; background-size: cover; text-align: center; color: #FFF;}
.rect{width: 1172px; height: 611px;  background: #FFF; border-radius: 12px; margin: auto; }
#partCont h2 {background: rgba(1,17,106,0.5); font-size: 40px; padding: 15px 0; margin-bottom: 140px;}
#partCont h3 {font-size: 24px; margin-bottom: 10px;}
#partCont .inner {max-width: 550px; width: 80%; margin: 0 auto; border: 1px solid #FFF; background: url("image/bg_btn.png") repeat-x; background-size: 10px 100%; padding: 20px 10px 15px; font-size: 20px;}
@media screen and (max-width: 736px) {
    /*#partner h3,#franchis h3 {width: 100%;}*/
    #point,#read,#franchis,#partner {margin-bottom: 0;}
	#top03,#partCont {margin-bottom: 20px;}
    .top03_square{position: absolute; top: 1%; left: 3%; background: #FFF; width: 91%; padding: 1.5%; font-size: 11px; line-height: 1.3; border-radius: 15px;}
	#book {margin-bottom: 50px}
    #partner .kv {height: 200px;}
	#partner .ttlBar h2 {margin-bottom: 20px;}
    #partner .txt {background: url("image/bg.png") no-repeat left top; padding: 30px 10px 20px 10px;}
    #partner .txt p {margin: 0; padding-top: 15px; border-top: 1px solid #A6A6A6;}
	#contact h2 {margin-bottom: 25px;}
	.ptb80 {padding: 50px 0;}
}
@media screen and (max-width: 736px) {
    #partner .kv {height: 150px;}
    #partCont h2 {margin-bottom: 50px;}
}

#franchis {font-size: 18px; font-weight: bold;}
#franchis .fran {width: 40%; max-width: 400px; float: left; margin: 0 5% 30px; font-size: 18px;}
#franchis .fran .txtL {background: url("image/arrowl.png") no-repeat right center; padding: 20px 150px 20px 20px; color: #000;}
#franchis .fran .txtR {background: url("image/arrowr.png") no-repeat left center; padding: 20px 20px 20px 170px;  color: #000; text-align: left;}
#franchis .flow {background: url("image/arrowu.png") no-repeat center bottom; padding-bottom: 130px; width: 90%; max-width: 520px; margin-left: auto; margin-right: auto;}
#franchis .flowLast {background: url("image/arrowb.png") no-repeat center bottom; padding-bottom: 130px; width: 90%; max-width: 520px; margin-left: auto; margin-right: auto;}
#franchis .flow .inner,#franchis .flowLast .inner {padding: 40px 60px 0; text-align: center; font-size: 25px; color: #000; background: #FFF;}
#franchis .flow .inner h4,#franchis .flowLast .inner h4 {font-size: 40px; margin-bottom: 20px;}
#franchis .circle {width: 30%; float: left; margin-top: 35px;}
#franchis .illust {width: 26.25%; float: left; margin: 0 6.875%;}
#franchis .detail {border-bottom: 1px solid #000; background: #FFF; color: #000;}
#franchis .detail .ttl {padding: 10px; text-align: center; font-size: 30px; font-weight: bold;}
#franchis .detail .midashi {padding: 10px; font-size: 25px; width: calc(47% - 21px); border-right: 1px solid #000; text-align: center; background: #D9D9D9; float: left; font-weight: normal;}
#franchis .detail .txt {width: calc(53% - 20px); padding: 10px; font-size: 25px; font-weight: normal;}
#franchis .detail .desc {float: left;} 
#franchis .detail .price {float: right;}
#franchis .sales {width: 62%; margin: 0 auto 40px; font-size: 25px; font-weight: normal;}
#franchis .notice {background: #BFBFBF; padding: 30px; font-size: 18px; font-weight: normal; color: #000;}
@media screen and (max-width: 980px) {
    #franchis .fran .txtL {padding: 20px 100px 20px 20px;}
}
@media screen and (max-width: 925px) {
    #franchis .fran {width: 100%; float: none; margin: 0 auto 30px;}
}
@media screen and (max-width: 500px) {
    #franchis .detail .midashi {width: calc(100% - 20px); border-right: none;}
    #franchis .detail .txt {width: calc(100% - 20px);}
    #franchis .sales {width: 80%;}
    #franchis .flow .inner,#franchis .flowLast .inner {padding: 30px;}
    #franchis .circle {width: 80%; float: none; margin: 35px auto 0;}
    #franchis .illust {width: 80%; float: none; margin: 0 auto;}
}

#contact .txtC {font-size: 25px;}

@media screen and (max-width: 768px) {
    #read h2,#partner h2,#franchis h2,#contact h2,#partCont h2,#franchis .flow .inner h4,#franchis .flowLast .inner h4 {font-size: 26px;}
    #franchis .detail .ttl {font-size: 24px;}
    #partCont h3 {font-size: 16px;}
    #footComp h2,#partner h3,#franchis h3,#franchis .flow .inner,#franchis .flowLast .inner,#franchis .detail .midashi,#franchis .detail .txt,#franchis .sales,#contact .txtC {font-size: 20px;}
    #partner .txt h4,#partCont .inner {font-size: 16px;}
    #read,#franchis,#franchis .fran,#franchis .notice {font-size: 14px;}
}
@media screen and (max-width: 500px) {
    #franchis .detail .ttl {font-size: 20px;}
    #franchis .detail .midashi,#franchis .detail .txt,#franchis .sales,#contact .txtC {font-size: 16px;}
}