@charset "utf-8";
@import url('components.css');

a { text-decoration:none; color: inherit; }
a:hover { text-decoration:none; color:#25A1C6; }
img { max-width: 100%; }
body { background: #ffffff; padding:0; width: 100%; overflow: hidden; }

header { height: 160px; display: flex; align-items: center; justify-content: space-between; }
header .logo { margin: 0 0 0 25px; }
header nav { display: flex; flex-direction: row-reverse; align-items: center; }
header nav ul { display: flex; }
header nav ul li { margin: 0 2em 0 0; font-weight: normal; font-size: 1rem; }
header nav ul li a { position: relative; transition: color .3s; }
header nav ul li.active a,
header nav ul li a:hover { color: #38B8EF; }
header nav ul li a::before { transition: .3s; content: ""; display: block; width: 80px; height: 0; border-top:4px solid #38B8EF; position: absolute; left: 0; bottom: -10px; visibility: hidden; opacity: 0; }
header nav ul li.active a::before,
header nav ul li a:hover::before { visibility: visible; opacity: 1; }
header nav ul li.home.active a::before,
header nav ul li.home a:hover::before { width: 3em; left: calc(50% - 1.5em); }
header nav ul li.about.active a::before,
header nav ul li.about a:hover::before { width: 10em; left: calc(50% - 5em); }
header nav ul li.server.active a::before,
header nav ul li.server a:hover::before { width: 8em; left: calc(50% - 4em); }
header nav ul li.plan.active a::before,
header nav ul li.plan a:hover::before { width: 9em; left: calc(50% - 4.5em); }
header .hMenu { margin: 0 25px 0 0; }
header .hMenu ul { display: flex; overflow: hidden; border-radius: 7px; }
header .hMenu ul li { }
header .hMenu ul li.contact { width: 180px; }
header .hMenu ul li.mypage { width: 120px; }
header .hMenu ul li a { display: block; height: 80px; padding: 54px 0 0; line-height: 1; font-size: .8rem; text-align: center; color: #fff; font-weight: normal; position: relative; }
header .hMenu ul li a span { line-height: 1; font-size: .8rem; text-align: center; color: #fff; font-weight: bold; }
header .hMenu ul li.contact a { background: #9bd4e9; }
header .hMenu ul li.mypage a { background: #38B8EF; }
header .hMenu ul li.contact a:hover { background: #36c79E; }
header .hMenu ul li.mypage a:hover { background: #38B8fF; }
header .hMenu ul li a::before { content: ""; position: absolute; left: 50%; top:10px; }
header .hMenu ul li.contact a::before { content: url(/static/images/ico_mail.svg); left: calc(50% - 15px); top:16px; }
header .hMenu ul li.mypage a::before { content: url(/static/images/ico_mypage.svg); left: calc(50% - 15px); top:13px; }

.footerContact { background: #9bd4e9; }
.footerContact h6 { font-size: 1.4rem; color: #fff; font-weight: normal; text-align: center; padding: 30px 10px 20px; }
.footerContact dl { display: flex; align-items: center; justify-content: center; padding: 0 0 30px; }
.footerContact dt { line-height: 1; font-size: 1.4rem; font-weight: normal; color: #fff; }
.footerContact dd:nth-of-type(1) { line-height: 1; font-size: 3rem; font-weight: normal; color: #fff; padding: 0 10px; }
.footerContact dd:nth-of-type(2) { line-height: 1; font-size: 1rem; font-weight: normal; color: #fff; }

footer { background: #526C76; }
footer nav ul { display: flex; align-items: center; justify-content: center; margin: 0; padding: 50px 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
footer nav ul li { margin: 0 1em; font-weight: normal; color: #fff; }
footer nav ul li a { color: #fff; position: relative; transition: .3s; }
footer nav ul li a:hover { color: rgba(255,255,255,.5);}
footer nav ol { display: flex; align-items: center; justify-content: center; margin: 0; padding: 60px 0 0; }
footer nav ol li { margin: 0 1em; font-weight: normal; color: #fff; font-size: .9rem; }
footer nav ol li a { color: #fff; position: relative; transition: .3s; }
footer nav ol li a:hover { color: rgba(255,255,255,.5);}
footer small { display: block; text-align: center; font-size: .8rem; color: #fff; padding: 20px 0 60px; }


.kv { display: flex; align-items: center; height: 40vw; width: 100%; background: url(/static/images/catch_bg@2x.jpg) center center/cover no-repeat; }
.kv .inr { margin:8vw; }
.kv .inr h1 { margin:0 0 25px; }
.kv .inr h1 img { height: 10vw; }
.kv .inr ul li a { display: inline-block; background:#38B8EF; color: #fff; padding: 20px 40px; line-height: 1; font-weight: normal; }

.topAbout { border-bottom: 1px solid rgba(0,0,0,.05); max-width: 1402px; margin: 100px auto; border:1px solid rgba(0,0,0,.1); }
.topAbout dl { display: flex; width: 100%; }
.topAbout dl:nth-of-type(even) { flex-direction: row-reverse; border-top: 1px solid rgba(0,0,0,.1); }
.topAbout dl dt { width: 700px; }
.topAbout dl dt img { width: 100%; object-fit: cover;  }
.topAbout dl dd { width: calc(100% - 700px); display: flex; align-items: center; justify-content: center; padding: 0 50px; }
.topAbout dl dd h2 { font-size: 1.4rem; font-weight: normal; }
.topAbout dl dd p { font-size: 1rem; margin:0 0 1em; }
.topAbout ul li a { display: inline-block; background:#9bd4e9; color: #fff; padding: 10px; width: 210px; line-height: 1; font-weight: normal; text-align: center; border-radius: 100px; }
.topAbout ul li a:hover { opacity: .75; }

.topFlow { background: #eee; padding:60px 15px; }
.topFlow h2 { font-size:1.4rem; margin: 0 auto 60px; text-align: center; font-weight: normal; }
.topFlow .inr { max-width: 800px; margin: 0 auto; }
.topFlow .inr dl { margin:0 auto 30px; position:relative; }
.topFlow .inr dl dt { font-size: 1.2rem; background: #777; color: #fff; text-align: center; padding: 15px; border-top-left-radius: 10px; border-top-right-radius: 10px; font-weight: normal; }
.topFlow .inr dl dd { background: #fff; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 20px 20px 1px; }
.topFlow .inr dl dd h3 { font-size: 1rem; font-weight: normal; margin: 0 0 5px; }
.topFlow .inr dl dd h4 { font-size: 3rem; line-height: 1; font-weight: 100; margin: 0 0 20px; color: #2CBAA4; text-align: center; }
.topFlow .inr dl dd h4 small { display:block; line-height: 1; font-size:.8rem; font-weight: 100; margin: 0 0 5px; color: #5C5C5C; }
.topFlow .inr dl dd p { margin: 0 auto 20px; }
.topFlow .inr dl dd hr { margin:20px auto; }
.topFlow .inr dl dd ul { width: 100%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; }
.topFlow .inr dl dd ul li a { display: inline-block; background:#9bd4e9; border-radius:100px; color: #fff; padding: 10px; width: 210px; line-height: 1; font-weight: normal; text-align: center; }
.topFlow .inr dl dd ul li a:hover { opacity: .75;}
.topFlow .inr dl:nth-of-type(1)::before { position: absolute; left: calc(50% - 15px); bottom: -15px; content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 15px 15px 0 15px; border-color: #fff transparent transparent transparent; }
.topFlow .inr dl:nth-of-type(1) dt { background: #9bd4e9; }
.topFlow .inr dl:nth-of-type(2)::before { position: absolute; left: calc(50% - 15px); bottom: -15px; content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 15px 15px 0 15px; border-color: #9bd4e9 transparent transparent transparent; }
.topFlow .inr dl:nth-of-type(2) dt { background: #9bd4e9; border-radius: 10px; }
.topFlow .inr dl:nth-of-type(3)::before { position: absolute; left: calc(50% - 15px); bottom: -15px; content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 15px 15px 0 15px; border-color: #fff transparent transparent transparent; }
.topFlow .inr dl:nth-of-type(3) dt { background: #9bd4e9; }
.topFlow .inr dl:nth-of-type(4) dt { background: #38B8EF; border-radius: 10px; }

.topFaq { background: #fff; padding:60px 15px; }
.topFaq h2 { font-size:1.4rem; margin: 0 auto 60px; text-align: center; }
.topFaq .inr { max-width: 800px; margin: 0 auto; }
.topFaq .inr dl { border-top:1px solid rgba(0,0,0,.1); padding: 30px 0; }
.topFaq .inr dl dt { padding: 0 0 0 45px; font-weight: normal; margin: 0 0 10px; position: relative; background: url(/static/images/ico_q.svg) left center no-repeat; color: #36557D; }
.topFaq .inr dl dd { padding: 0 0 0 45px; line-height: 1.6; position: relative; background: url(/static/images/ico_a.svg) left center no-repeat; }
.topFaq .inr dl dd a { color: #25A1C6; }
.topFaq .inr dl dd a:hover { color: #25A1e6; text-decoration: underline; }

.topContact { background: rgba(0, 0, 0, .03); padding:60px 15px; }
.topContact h2 { font-size:1.4rem; margin: 0 auto 60px; text-align: center; }
.topContact .inr { max-width: 1000px; padding: 50px; margin: 0 auto; display: flex; align-items: center; justify-content: center;  /* background: #fff; */ }

.title { background: url(/static/images/title_bg@2x.jpg) center center/cover no-repeat; min-height: 140px; display: flex; align-items: center; justify-content: space-between; }
.title h1 { font-size: 1.3rem; color: #fff; font-weight: normal; text-align: center; margin: 0 auto; }
.title h1 small { font-size: .8rem; line-height: 1; color: #fff; display: block; text-align: center;}

.aboutCaption { }
.aboutCaption h2 { font-size:1.4rem; margin: 0 auto; padding: 60px 0; text-align: center; color:#2C7790; font-weight: normal; }
.aboutCaption .inr { max-width: 1200px; margin: 0 auto; background: #f5fafc; }
.aboutCaption h3 { max-width: 1200px; margin: 0 0 20px; background: #f5fafc; font-size: 1.2rem; font-weight: normal; }
.aboutCaption dl {  border-bottom: 1px solid rgba(0,0,0,.1); }
.aboutCaption dl dt { text-align: center; }
.aboutCaption dl dd { padding: 60px; }
.aboutCaption dl dd em { color: #DB5075; font-weight: normal; }
.aboutCaption dl:nth-of-type(2) { display: flex; width: 100%; }
.aboutCaption dl:nth-of-type(2) dt { width: 50%; }
.aboutCaption dl:nth-of-type(2) dd { width: 50%; display: flex; align-items: center; justify-content: space-between; }
.aboutCaption dl:nth-of-type(3) { display: flex; width: 100%; flex-direction: row-reverse; }
.aboutCaption dl:nth-of-type(3) dt { width: 50%; }
.aboutCaption dl:nth-of-type(3) dd { width: 50%; display: flex; align-items: center; justify-content: space-between; }

.aboutSample {}
.aboutSample h2 { font-size:1.4rem; margin: 0 auto; padding: 60px 0; text-align: center; color:#2C7790; font-weight: normal; }
.aboutSample .inr { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
.aboutSample .inr dl { width: calc((100% - 20px) / 2); border-top:1px solid rgba(0, 0, 0, .1); padding: 30px 0; display: flex; }
.aboutSample .inr dl dt { width: 150px;}
.aboutSample .inr dl dd { width: calc(100% - 150px); padding: 0 0 0 20px;}

.aboutDetail { }
.aboutDetail h2 { font-size:1.4rem; margin: 0 auto; padding: 60px 0; text-align: center; color:#2C7790; font-weight: normal; }
.aboutDetail h2 small { display: block; font-size:1rem; line-height: 1; text-align: center; color:#2C7790; font-weight: normal; }
.aboutDetail .inr { overflow: auto; max-width: 1200px; margin: 0 auto 100px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.aboutDetail .inr table { min-width: calc(100% - 2px); border-collapse: collapse; border-spacing: 0; }
.aboutDetail .inr table thead th { white-space: nowrap; background: #accbe8; padding: 20px 5px; color: #fff; text-align: center; }
.aboutDetail .inr table tbody th { white-space: nowrap; background: #ddf0ff; padding: 20px; text-align: center; vertical-align: middle; border:1px solid rgba(0, 0, 0, .1); font-weight: normal; }
.aboutDetail .inr table tbody th span { display: block; font-size: .8rem; text-align: center; }
.aboutDetail .inr table tbody td { white-space: nowrap; background: #fff; padding: 20px; text-align: center; vertical-align: middle; border:1px solid rgba(0, 0, 0, .1); }

.serverCaption { padding: 0 20px 60px; border-bottom: 1px solid rgba(0,0,0,.1); }
.serverCaption > h2 { font-size:1.4rem; margin: 0 auto; padding: 60px 0 10px; text-align: center; color:#2C7790; font-weight: normal; }
.serverCaption > h2 small { display: block; font-size:1rem; line-height: 1; text-align: center; color:#2C7790; }
.serverCaption > p { font-size: 1.1rem; text-align: center; margin: 0 auto 60px; line-height: 1.8; }
.serverCaption > ul li { text-align: center; margin: 0 auto; }

.serverAmadana { padding: 0 10px 30px; border-bottom: 1px solid rgba(0,0,0,.1); }
.serverAmadana > h2 { margin: 60px 10px; text-align: center; }
.serverAmadana > p { font-size: 1.1rem; margin: 60px 10px; text-align: center; }
.serverAmadana .lineup { display: flex; justify-content: center; margin: 60px auto; }
.serverAmadana .lineup dl { text-align: center; margin: 0 20px; }
.serverAmadana .lineup dl dt { text-align: center; margin: 0 auto 10px; }
.serverAmadana .lineup dl dd { text-align: center; }
.serverAmadana .detail { max-width: 1000px; margin: 60px auto; display: flex; justify-content: space-between; }
.serverAmadana .detail .txt { width: calc((100% - 60px) - 300px); }
.serverAmadana .detail .txt dl { display: flex; border-top:1px solid rgba(0, 0, 0, .1); }
.serverAmadana .detail .txt dl dt { width: 180px; background: rgba(0, 0, 0, .03); padding: 10px; }
.serverAmadana .detail .txt dl dd { width: calc(100% - 180px); background: rgba(255, 255, 255, 1); padding: 10px; }
.serverAmadana .detail .txt ul { border-top:1px solid rgba(0, 0, 0, .1); padding: 10px 0 0; }
.serverAmadana .detail .txt ul li { text-indent: -1em; padding-left: 1em; }
.serverAmadana .detail .img { width: 300px; }
.serverAmadana .point { max-width: 1000px; margin: 60px auto; }
.serverAmadana .point dl { margin: 0 0 30px; display: flex; justify-content: space-between; flex-direction: row-reverse; }
.serverAmadana .point dt { width: 300px; }
.serverAmadana .point dd { width: calc((100% - 60px) - 300px); }
.serverAmadana .point dd h3 { font-size: 1.2rem; color: #2C7790; font-weight: normal; margin: 0 0 5px; }

.sServer { padding: 0 10px 30px; border-bottom: 1px solid rgba(0,0,0,.1); }
.sServer > h2 { margin: 60px 10px; text-align: center; font-size: 2rem; }
.sServer > h2 small {display: block; line-height: 1; text-align: center; font-size: 1.3rem; }
.sServer > p { font-size: 1.1rem; margin: 60px 10px; text-align: center; }
.sServer .detail { max-width: 1000px; margin: 60px auto; display: flex; justify-content: space-between; }
.sServer .detail .txt { width: calc((100% - 60px) - 300px); }
.sServer .detail .txt dl { display: flex; border-top:1px solid rgba(0, 0, 0, .1); }
.sServer .detail .txt dl dt { width: 180px; background: rgba(0, 0, 0, .03); padding: 10px; }
.sServer .detail .txt dl dd { width: calc(100% - 180px); background: rgba(255, 255, 255, 1); padding: 10px; }
.sServer .detail .txt ul { border-top:1px solid rgba(0, 0, 0, .1); padding: 10px 0 0; }
.sServer .detail .txt ul li { text-indent: -1em; padding-left: 1em; }
.sServer .detail .img { width: 300px; }

.maintenance > h2{margin: 60px 0 30px 0; text-align: center; font-size: 2rem; }
.maintenance > h3{text-align: center; font-size: 1.6rem; }
.maintenance > p{font-size: 1.1rem; margin: 0 0 30px 0; text-align: center; }
.maintenance .maintenance-inner{ max-width: 1000px; margin: 0px auto 60px auto;}
.maintenance .maintenance-inner .mTitle{ font-size: 1.7rem; margin: 0; color: #fff; text-align: center; position: relative; padding: 15px 0; background: #77c3df; overflow: hidden;}
.maintenance .maintenance-inner .mTitle:before { background-color: #fff; content: ''; display: block; opacity: 0.3; transform: rotate(-50deg); position: absolute; bottom: -10px; right: -330px; width: 500px; height: 500px;}
.maintenance .maintenance-inner .mTitle::after {background-color: #fff; content: ''; display: block; opacity: 0.3; transform: rotate(-70deg); position: absolute; bottom: -100px; right: -500px; width: 500px; height: 500px;}
.maintenance .maintenance-inner .mContent{display: flex; background-color: #ecf0f3; padding: 14px; margin: 20px 0;}
.maintenance .maintenance-inner .mHeding {margin-left: 20px; margin-top: 0; max-width: 563px;}
.maintenance .maintenance-inner h5{color: #005C6B; font-size: 1.6rem;}
.maintenance .maintenance-inner .mHeding .txt{margin: 28px 0;  line-height: 1.5rem;}

/*
.planList { max-width: 1040px; margin: 60px auto; }
.planList .inr { display: flex; justify-content: space-between; margin: 0 0 10px; }
.planList .inr .planDetail { width: calc((100% - 20px) / 3); background: #777; padding: 20px; position: relative; }
.planList .inr .planDetail h2 { font-size: 1.3rem; line-height: 1.5; height: 3em; text-align: center; color: #fff; }
.planList .inr .planDetail .sub { font-size: 1rem; text-align: center; color: #fff; margin: 0 auto 20px; }
.planList .inr .planDetail dl { border-radius: 5px; background:#fff; margin: 0 0 20px; overflow: hidden; }
.planList .inr .planDetail dl dt { padding: 10px 10px 5px; font-size: 1.1rem; text-align: center; font-weight: normal; }
.planList .inr .planDetail dl dd { padding: 0 10px 10px; text-align: center; color: #FA0101; font-size: 2rem; line-height: 1; font-weight: normal; }
.planList .inr .planDetail dl dd em { display: block; font-size: 1.5rem; text-align: center; font-weight: normal; color: #FA0101; line-height: 1.3; }
.planList .inr .planDetail dl dd small { display: block; font-size: .8rem; text-align: center; font-weight: normal; color: rgba(0,0,0,.8);line-height: 1; }
.planList .inr .planDetail dl:nth-of-type(1) { height: 110px; }
.planList .inr .planDetail dl:nth-of-type(2) { height: 150px; }
.planList .inr .planDetail dl:nth-of-type(3) {  }
.planList .inr .planDetail dl:nth-of-type(4) { margin: 0; }
.planList .inr .planDetail.planB dl:nth-of-type(2),
.planList .inr .planDetail.planC dl:nth-of-type(2) { background: transparent; }
.planList .inr .planDetail.planA { background: #28D5B3; }
.planList .inr .planDetail.planB { background: #73A0C1; }
.planList .inr .planDetail.planC { background: #73B8C1; }
.planList .inr .planDetail.planA::before { content:""; display: block; position: absolute; top:-40px; right: 0; width:78px; height: 87px; background: url(/static/images/ico_pickup@2x.png) center center no-repeat; background-size: 78px 87px; }
.planList > ul li { text-indent: -1em; padding-left: 1em; }
*/

.planList { max-width: 1040px; margin: 60px auto; }
.planList .inr { display: flex; justify-content: space-between; margin: 0 0 10px; }
.planList .inr .planDetail { width: calc((100% - 20px) / 2); background: #777; padding: 20px 20px 15px; position: relative; border-radius: 7px; }
.planList .inr .planDetail h2 { font-size: 1.3rem; line-height: 1.3; font-weight: normal; height: 3em; text-align: center; }
.planList .inr .planDetail .sub { font-size: 1rem; text-align: center; margin: 0 auto 20px; }
.planList .inr .planDetail h3 { line-height: 1; height: 80px; width: 100%; background: rgba(255,255,255.3); display: flex; align-items: center; flex-wrap: wrap; justify-content: center; border-radius: 5px; text-align: center; margin: 5px 0; font-size: 1.4rem; font-weight: bold; }
.planList .inr .planDetail h3 span { line-height: 1; border-radius: 5px; text-align: center; margin: 5px 0; font-size: 1.6rem; font-weight: bold; }
.planList .inr .planDetail h3 small { line-height: 1; font-size: 12px; }
.planList .inr .planDetail h3 em { line-height: 1;display: block; text-align: center; font-size: 12px; width: 100%; }
.planList .inr .planDetail h4 { height: 45px; width: 100%; background: rgba(255,255,255.3); display: flex; align-items: center; flex-wrap: wrap; justify-content: center; border-radius: 5px; text-align: center; margin: 5px 0; color:#f00; }
.planList .inr .planDetail.planB h3,
.planList .inr .planDetail.planC h3 { height: 130px; }
.planList .inr .planDetail.planA { background: #accbe8; }
.planList .inr .planDetail.planB { background: #eee; }
.planList .inr .planDetail.planC { background: #eee; }
.planList .inr .planDetail.planC::before { content:""; display: block; position: absolute; top:-40px; right: 0; width:78px; height: 87px; background: url(/static/images/ico_pickup@2x.png) center center no-repeat; background-size: 78px 87px; }
.planList > ul li { text-indent: -1em; padding-left: 1em; }
.planList .moredetail { padding: 120px 0 30px; background: url(/static/images/ico_plus.svg) center 30px no-repeat; }
.planList .moredetail ul { display: flex; align-items: center; justify-content: center; }
.planList .moredetail ul li { display: flex; align-items: center; justify-content: center; width: 220px; height: 220px; align-items: center; justify-content: center; background: #c6e5f0; border-radius: 1000px; margin: 0 30px; }
.planList .moredetail ul li { text-align: center; font-size: 1.2rem; color: rgba(255, 0, 0, .7); }
.planList .moredetail ul li span { font-size: 1.1rem; text-align: center; }
.planList .moredetail ul li em { text-align: center; display: block; font-size: 2rem; color: rgba(255, 0, 0, .7); font-weight: bold; }
.planList .moredetail ul li small { text-align: center; display: block; font-size:12px; }
.planList .moredetail ul li em small { display: inline-block; font-size:12px; color: rgba(255, 0, 0, .7); font-weight: bold; }

.planInfo { max-width: 1040px; margin: 100px auto; }
.planInfo .planDetail { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; background: #777; padding: 20px; position: relative; margin: 100px 0 10px; }
.planInfo .planDetail h2 { width: 100%; font-size: 1.3rem; line-height: 1.3; font-weight: normal; text-align: center; }
.planInfo .planDetail .sub { width: 100%; font-size: 1rem; text-align: center; margin: 0 auto 20px; }
.planInfo .planDetail h3 { line-height: 1; height: 80px; width: 100%; background: rgba(255,255,255.3); display: flex; align-items: center; flex-wrap: wrap; justify-content: center; border-radius: 5px; text-align: center; margin: 5px 0; font-size: 1.4rem; font-weight: bold; }
.planInfo .planDetail h3 span { line-height: 1; border-radius: 5px; text-align: center; margin: 5px 0; font-size: 1.6rem; font-weight: bold; }
.planInfo .planDetail h3 small { line-height: 1; font-size: 12px; }
.planInfo .planDetail h3 em { line-height: 1;display: block; text-align: center; font-size: 12px; width: 100%; }
.planInfo .planDetail h4 { height: 45px; width: 100%; background: rgba(255,255,255.3); display: flex; align-items: center; flex-wrap: wrap; justify-content: center; border-radius: 5px; text-align: center; margin: 5px 0; color:#f00; }
.planInfo .planDetail.planB h3,
.planInfo .planDetail.planC h3 { height: 130px; }
.planInfo .planDetail.planA { background: #accbe8; }
.planInfo .planDetail.planB { background: #eee; }
.planInfo .planDetail.planC { background: #eee; }
.planInfo .planDetail.planC::before { content:""; display: block; position: absolute; top:-40px; right: 0; width:78px; height: 87px; background: url(/static/images/ico_pickup@2x.png) center center no-repeat; background-size: 78px 87px; }
.planInfo h3 { margin: 60px auto; text-align: center; font-size: 1.8rem; line-height: 1.4; color: #5B7C95;}
.planInfo h4.hPoint { font-size: 1.5rem; color: #000; font-weight: 500; margin: 0 auto 7px; }
.planInfo h4.hPoint em { font-size: 1.6rem; text-align: center; color: #25A1e6; font-weight: normal; }
.planInfo h4.hPoint em small { font-size:1rem; text-align: center; color:  #25A1e6; font-weight: normal; }
.planInfo h5.hPoint { font-size: 1.3rem; text-align: center; color: #000; font-weight: 500; margin: -50px auto 60px; }
.planInfo h6 { border-left: 4px solid #5B7C95; padding-left: 8px; line-height: 1.25; margin: 0 0 5px; }
.planInfo p { margin: 0 auto 50px; }

.planOption { background: #f6f6f6;  padding: 60px 15px; }
.planOption .inr { max-width: 1040px; margin: 0 auto; }
.planOption h2 { width: 100%; font-size: 1.3rem; line-height: 1.5; text-align: center; }
.planOption h3 { width: 100%; font-size: 2rem; line-height: 1.5; text-align: center; margin: 0 auto 60px; }
.planOption h4 { background: #38B8EF; color: #fff; margin: 30px auto; padding: 10px; border-radius: 3px; }
.planOption h5 { vertical-align: middle; line-height: 1.8; font-size: 1.2rem; text-align: center; color: #000; font-weight: 600; margin: 0 auto 10px; }
.planOption h5 em{ vertical-align: middle; line-height: 1; font-size: 3rem; text-align: center; color: #f00; font-weight: 600; }
.planOption dl { margin: 30px auto; }
.planOption dl dt { font-size: 1.2rem; font-weight: normal; }
.planOption dl dd { font-size: 2rem; font-weight: normal; color: #f00; }
.planOption h6 { border-left: 4px solid #5B7C95; padding-left: 8px; line-height: 1.25; margin: 0 0 5px; }
.planOption p { margin: 0 auto 30px; }





.pay { background: #f5fafc; padding: 0 10px 50px; }
.pay h2 { font-size:1.4rem; margin: 0 auto; padding: 60px 0; text-align: center; color:#2C7790; }
.pay dl { max-width: 1040px; margin: 0 auto 10px; background: #fff; padding: 20px; }
.pay dl dt { font-weight: normal; margin: 0 0 10px; }
.pay dl dd p { margin: 0 0 1em; }
.pay dl dd ul li { margin: 0 auto; text-align: center; }

/* ───────────────────────────────────────────────────────────────────────────
 1400px以下の動作
─────────────────────────────────────────────────────────────────────────── */
@media print, screen and (max-width:1400px){

  .topAbout { margin: 0; }
  .topAbout dl dt,
  .topAbout dl dd { width: 50%; }

}

/* ───────────────────────────────────────────────────────────────────────────
 1200px以下の動作
─────────────────────────────────────────────────────────────────────────── */
@media print, screen and (max-width:1200px){

  header { height: 60px; }
  header .logo { margin: 0 0 0 10px;}
  header .logo img { height: 40px; }
  header nav { display: none; }
  header .hMenu { margin: 0; }
  header .hMenu ul { border-radius: 0;}
  header .hMenu ul li.contact { height: 60px; width: 60px; font-size: 10px;}
  header .hMenu ul li.mypage { height: 60px; width: 60px; font-size: 10px;}
  header .hMenu ul li a { height: 60px;}
  header .hMenu ul li a span { display: none;}
  header .hMenu ul li.contact a::before { top:20px; }
  header .hMenu ul li.mypage a::before { top:15px; }
  .kv { height: 300px; }
  .kv .inr h1 img { height: 100px; }
  .kv .inr ul li a { font-size: 1rem; padding: 10px;}
  .topAbout dl { display: block;}
  .topAbout dl dt { width: 100%; }
  .topAbout dl dd { width: 100%; padding: 30px; }
  .topFlow { padding-bottom: 1px;}
  .topFlow .inr dl dd h4 { font-size: 2.3rem; }
  .topFaq { padding-bottom: 1px;}
  .topContact { padding-bottom: 15px;}
  .topContact .inr { padding: 15px;}
  .topContact .inr iframe { height: 2800px !important; }

  .footerContact h6 { font-size: 1rem; }
  .footerContact dl { font-size: 1rem; display: block; }
  .footerContact dl dt { font-size: 1rem; text-align: center; }
  .footerContact dl dd { font-size: 1rem; text-align: center; }
  .footerContact dd:nth-of-type(1) { font-size: 2.3rem;}
  footer { display: block; }
  footer .logo { text-align: center; margin: 0 auto 30px; }
  footer nav { margin: 0; }
  footer nav ul { display: flex; flex-wrap: wrap; padding: 0; border-bottom:none; }
  footer nav ul li { margin: 0; font-weight: normal; font-size: .8rem; width: 50%; }
  footer nav ul li a { display: block; padding: 10px; text-align: center; border-top:1px solid rgba(255,255,255,.2); }
  footer nav ol { display: flex; flex-wrap: wrap; padding: 0; border-bottom:1px solid rgba(255,255,255,.2); }
  footer nav ol li { margin: 0; font-weight: normal; font-size: .8rem; width: 50%; }
  footer nav ol li a { display: block; padding: 10px; text-align: center; border-top:1px solid rgba(255,255,255,.2); }
  footer small { padding: 20px 0; }

  .title { min-height: 100px; }

  .aboutCaption dl dd { padding: 20px; }
  .aboutCaption dl:nth-of-type(1) dt img { height: 200px; object-fit: cover; }
  .aboutCaption dl:nth-of-type(2) { display: block; width: 100%; }
  .aboutCaption dl:nth-of-type(2) dt { width: 100%; }
  .aboutCaption dl:nth-of-type(2) dd { width: 100%; display: block; }
  .aboutCaption dl:nth-of-type(3) { display: block; width: 100%; }
  .aboutCaption dl:nth-of-type(3) dt { width: 100%; }
  .aboutCaption dl:nth-of-type(3) dd { width: 100%; display: block; }
  .aboutSample .inr { display: block; margin: 0 15px; border-bottom: 1px solid rgba(0,0,0,.1); }
  .aboutSample .inr dl { width: auto; padding: 15px 0; }
  .aboutSample .inr dl dt { width: 80px; }
  .aboutSample .inr dl dd { width: calc(100% - 80px); }
  .aboutDetail .inr { margin: 0 15px 30px;}

  .serverCaption { padding: 20px; }
  .serverCaption > h2 { padding: 0 0 10px;}
  .serverCaption > p { margin: 0 auto 20px; text-align: left; }
  .serverCaption > p br { display: none;}
  .serverAmadana > p br { display: none;}
  .serverAmadana .lineup dl { margin: 0 10px;}
  .serverAmadana .lineup dl dd { font-size: 10px; }
  .serverAmadana .detail { display: block;}
  .serverAmadana .detail .txt { width: auto; }
  .serverAmadana .detail .txt dl { display: block; }
  .serverAmadana .detail .txt dl dt { width: auto; padding: 5px; font-size:11px; font-weight: normal; }
  .serverAmadana .detail .txt dl dd { width: auto; padding: 10px 0;}
  .serverAmadana .detail .img { width: auto; text-align: center; margin: 0 auto; padding: 30px; }
  .serverAmadana .point { margin: 20px; }
  .serverAmadana .point dl { margin: 0 0 10px; display: block; }
  .serverAmadana .point dt { width: auto; margin: 0 -30px 20px; }
  .serverAmadana .point dt img { width: 100%; }
  .serverAmadana .point dd { width: auto; padding: 0 0 10px; }

  .sServer { padding:30px 20px 20px; }
  .sServer > h2 { padding: 0 0 10px; margin: auto;}
  .sServer .detail { display: block; margin: 20px auto;}
  .sServer .detail .txt { width: auto; }
  .sServer .detail .txt dl { display: block; }
  .sServer .detail .txt dl dt { width: auto; padding: 5px; font-size:11px; font-weight: normal; }
  .sServer .detail .txt dl dd { width: auto; padding: 10px 0;}
  .sServer .detail .img { width: auto; text-align: center; margin: 0 auto; padding: 30px; }

  .maintenance > h2{margin: 30px 10px; font-size: 1.4rem; }
  .maintenance > h3{margin: 0;font-size: 1.2rem; }
  .maintenance > p{font-size: 0.8rem; margin: 0 10px 15px 10px}
  .maintenance .maintenance-inner .mtxt{ font-size: 1.3rem;line-height: 50px;}
  .maintenance .maintenance-inner .mContent{display: block; border-radius: 0px; padding: 0 0 10px 0}
  .maintenance .maintenance-inner .mHeding{margin: 0 15px;}
  .maintenance .mImg img{ width: 100vh; border-radius: 0px;}
  .maintenance .maintenance-inner h5{ font-size: 1.3rem; margin-top: 20px;}
  .maintenance .maintenance-inner .mHeding .txt{ font-size: 0.9rem; margin: 20px 0 20px 0;  line-height: 2;}

  .planList {padding: 10px; margin: 0;}
  .planList .inr { display: block; margin: 0; padding: 0 0 1px; }
  .planList .inr .planDetail h2 { height: auto; }
  .planList .inr .planDetail.planB h3, .planList .inr .planDetail.planC h3 { height: auto; padding: 15px 10px; }
  .planList .moredetail { padding: 160px 0 0;}
  .planList .moredetail ul { flex-wrap: wrap;}
  .planList .moredetail ul li { width: 180px; height: 180px; margin: 10px auto; }
  .planList .moredetail ul li span { font-size: .9rem; }

  .planList .inr .planDetail { width:auto; margin: 0 0 10px; }
  .planList .inr .planDetail dl { margin: 0 0 10px; }
  .planList .inr .planDetail dl:nth-of-type(1) { height: auto; }
  .planList .inr .planDetail dl:nth-of-type(2) { height: auto; }
  .planList > ul { margin: 10px;}
  .pay { padding: 0 10px 1px;}

  .planInfo { margin: 0 20px; }
  .planInfo .planDetail { padding: 20px 10px 10px; }
  .planInfo .planDetail dl { width: 100%; margin: 0 0 10px; }
  .planInfo .planDetail.planB dl,
  .planInfo .planDetail.planC dl { width: 100%; }
  .planInfo .planDetail dl:nth-last-of-type(1) { margin: 0; }
  .planInfo h3 { font-size: 1.3rem; margin: 15px auto;}
  .planInfo h4.hPoint { font-size: 1rem; margin: 0 auto 15px; }
  .planInfo h5.hPoint { font-size: 1.2rem; margin: 0 auto 15px; }
  .planOption h3 { font-size: 1.3rem;}
  .planOption h5 { font-size: 1rem; }
  .planOption h5 em { font-size: 1.3rem; }
  .planOption dl dd { font-size: 1.5rem;}

  .pay h2 {margin: 60px auto 0 auto;}

}

/* ───────────────────────────────────────────────────────────────────────────
 360px以下の動作
─────────────────────────────────────────────────────────────────────────── */
@media print, screen and (max-width:360px){

}

/* ───────────────────────────────────────────────────────────────────────────
 印刷時動作
─────────────────────────────────────────────────────────────────────────── */
@media print{  }