@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: #222; border-top: 5px solid #1B1464;}
.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;}
}

.txtBK {color: #222;}

/* 画像 */
.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;}

.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 */}
.ratioBox1-12:before {content: "";display: block;padding-top: 120%; /* 1:12 */}
.ratioBoxInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

#header {width: 100%; max-width: 960px; padding: 20px 0; margin: 0 auto; position: relative;}
#header h1 {font-size: 12px; margin: 0 auto; font-weight: normal; width: 138px;}
#headContact {text-align: right; font-size: 12px; font-weight: bold; line-height: 20px; position: absolute; right: 0; top: 35px; color: #1B1464;}
#headContact .mail {font-size: 20px; line-height: 24px; margin-bottom: 10px;}
#headContact .mail a {color: #1B1464;}
@media screen and (max-width: 960px) {
	#header {width: 95%; padding: 20px 0; margin: 0 2.5%;}
}
@media screen and (max-width: 660px) {
	#header {width: 95%; padding: 20px 0; margin: 0 2.5%;}
	#header h1 {margin: 0;}
}
@media screen and (max-width: 500px) {
	#header h1 {width: 120px;}
	#headContact {top: 20px;}
	#headContact .mail {font-size: 16px;}
}
@media screen and (max-width: 340px) {
	#header h1 {width: 100px;}
	#headContact {line-height: 1.2;}
	#headContact .mail {font-size: 14px;}
}

footer {color: #FFF;}
#illust {width: 100%; max-width: 1065px; margin: 0 auto;}
#footer,#footCopy {background: #1B1464; padding: 20px 0; text-align: center;}
#footLogo {width: 138px; margin: 0 auto 10px;}
.footMail a {font-size: 28px; font-weight: bold; color: #FFF;}
#footGuide {background: #009C90; padding: 60px 0; text-align: center;}
#footGuide h2 {font-size: 40px; padding: 10px 75px; line-height: 40px; display: inline-block; text-align: center; background-image: url("image/bg5-1.svg"),url("image/bg5-2.svg"); background-position: left center,right center; background-size: 60px 60px,60px 60px; background-repeat: no-repeat,no-repeat; margin-bottom: 50px;}
#footGuide .inner {text-align: left;}
#footGuide h3 {font-size: 30px; margin-bottom: 20px;}
#footGuide h4 {font-size: 20px; margin-bottom: 10px; border-bottom: 2px solid #BFBFBF;}
#footGuide h5 {font-size: 14px; margin-bottom: 10px; border-bottom: 2px dotted #FFF;}
#footGuide .compL,#footGuide .compR {border: 1px solid #8C8C8C; padding: 5px 15px; color: #727171;}
#footGuide .compL {width: 230px; float: left; background: #D9D9D9;}
#footGuide .compR {border-left: none; width: calc(100% - 294px); float: left; background: #FFF;}
#footGuide ul.list1 {list-style: disc; margin-left: 1.5em;}
#footGuide ul.list2 {list-style: decimal; margin-left: 1.5em;}
#footGuide ul.list3 {padding-left: 1em; text-indent: -1em;}
@media screen and (max-width: 736px) {
	#footLogo {width: 120px;}
	.footMail a {font-size: 16px;}
	#footGuide h2 {font-size: 20px; padding: 10px 45px; background-size: 30px 30px,30px 30px;}
	#footGuide h3 {font-size: 20px;}
	#footGuide h4 {font-size: 16px;}
	#footGuide h5 {font-size: 13px;}
	#footGuide .compL,#footGuide .compR {width: 100%;}
	#footCopy {font-size: 10px;}
}

.container {width: 95%; max-width: 990px; 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 {width: 100%; max-width: 250px; margin: 0 auto;}
@media screen and (max-width: 800px) {
	.col3 {width: 47%;}
}
@media screen and (max-width: 500px) {
	.col4,.col4bb {width: 47%; float: left;}
	.col3,.col2 {width: 97%; float: none;}
	.col7 {width: 97%; float: none;}
}

.ttl {background: #1B1464; color: #FFF; text-align: center;}
.ttl h2 {font-size: 24px; display: inline-block; padding: 10px 70px; line-height: 30px;}
@media screen and (max-width: 500px) {
	.ttl h2 {font-size: 18px; display: inline-block; padding: 10px 70px; line-height: 30px;}
}

#slider {border-bottom: 10px solid #1B1464; overflow: hidden;}

#top01 h2 {border-bottom: 1px solid #1B1464; font-size: 30px; text-align: center; padding-bottom: 15px; margin-bottom: 30px;}
#top01 .read {color: #666; background: url("image/bg0.jpg") no-repeat center; background-size: cover; padding: 60px 0 40px; font-size: 22px;}
#top01 .readImg {display: none;}
#top01 ul {width: 50%;}
#top01 li {border-bottom: 1px solid #666; margin-bottom: 20px;}
#top01 li:last-child {margin-bottom: 30px;}
#top01 .btn {margin: 0;}
@media screen and (max-width: 800px) {
	#top01 .read {background: #EEE; background-image: none; padding: 0 0 40px; font-size: 18px;}
	#top01 .readImg {display: block; margin-bottom: 20px;}
	#top01 ul {width: 100%;}
}
@media screen and (max-width: 500px) {
	#top01 h2 {font-size: 20px;}
}

#top02 .ttl h2,#top02 .col3 {background: #009C90;}
#top02 .col3 {color: #FFF; margin-bottom: 30px;}
#top02 .dtl {padding: 15px; text-align: center;}
#top02 .itemN {font-size: 20px; border-bottom: 1px solid #FFF; margin-bottom: 10px;}
#top02 .price {font-size: 24px; font-weight: bold; margin-bottom: 10px;}
#top02 .btn .icon {width: 25px; margin: 0 10px 0 0; display: inline-block;}
@media screen and (max-width: 800px) {
	#top02 .itemN {font-size: 16px;}
	#top02 .price {font-size: 18px;}
}

#top03 .container {position: relative; color: #FFF;}
#top03 .dlpr {font-size: 18px; line-height: 30px; font-weight: bold; position: absolute; z-index: 5; top: 0;}
#top03 .dlpr .prArea1 {display: inline-block; margin-right: 20px; width: 180px; vertical-align: top;}
#top03 .dlpr .prArea2 {display: inline-block; margin-right: 20px; width: 340px; vertical-align: top;}
#top03 .dlpr .standBG {background: #CC0000; color: #FFF; padding: 10px 20px; border-radius: 5px;}
#top03 .dlpr .kocho,#top03 .dlpr .stand {display: inline-block; padding: 0 20px; float: left;}
#top03 .dlpr .kocho {border-radius: 5px;}
#top03 .dlpr .stand {border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-left: 5px;}
#top03 .dlpr .bg1 {background: #0465B9;}
#top03 .dlpr .bg2 {background: #51A0F3;}
#top03 .dlpr .bg3 {background: #01812B;}
#top03 .dlpr .bg4 {background: #70B840;}
#top03 .dlpr .bg5 {background: #EBBA02;}
#top03 .dlpr .bg6 {background: #F597A2;}
#top03 .dlpr .bg7 {background: #E55D57;}
#top03 .kocho2 {display: inline-block; border-radius: 5px; padding: 5px 20px; background: #009C90;}
#top03 .kocho2 span {margin-left: 1em;}
#top03 .notice {color: #E55D57; margin-bottom: 10px;}
#top03 .map {z-index: 0; top: 0; width: 100%;}
@media screen and (max-width: 1024px) {
	#top03 .dlpr {position: relative; margin-top: 20px;}
}
@media screen and (max-width: 736px) {
	#top03 .dlpr {font-size: 16px; position: relative; margin-bottom: 20px;}
	#top03 .map {margin-bottom: 20px;}
}
@media screen and (max-width: 736px) {
	#top03 .kocho2 span {margin-left: 0;}
}
@media screen and (max-width: 600px) {
	#top03 .dlpr .kocho,#top03 .dlpr .stand {display: block; float: none; width: calc(100% - 40px);}
	#top03 .dlpr .kocho {border-top-left-radius: 5px;border-top-right-radius: 5px; border-bottom-left-radius: 0px;}
	#top03 .dlpr .stand {border-top-right-radius: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; margin-left: 0px; margin-top: 1px;}
	#top03 .kocho2 {display: block;}
}

#top04 {color: #FFF;}
#top04 #mn01,#top04 #mn02,#top04 #mn03 {padding: 60px;}
#top04 #mn01 {background: url("image/bg1.jpg") no-repeat center; background-size: cover;}
#top04 #mn02 {background: url("image/bg2.jpg") no-repeat center; background-size: cover;}
#top04 #mn03 {background: url("image/bg3.jpg") no-repeat center; background-size: cover;}
#top04 .inner {background: rgba(0,156,144,0.8); padding: 20px 15px; font-size: 12px;}
#top04 .inner h3 {font-size: 24px; border-bottom: 1px solid #FFF; margin: 0 1.5% 15px;}
@media screen and (max-width: 736px) {
	#top04 #mn01,#top04 #mn02,#top04 #mn03 {padding: 30px 0;}
	#top04 .inner h3 {font-size: 18px;}
}

#primary {padding: 50px 0; border-top: 5px solid #009C90!important;}
.exsample {width: 100%; max-width: 735px; margin: 0 auto 20px;}