#main {color: #fff;} .mainCap {color: #fff;} .btnRequest { padding: 60px 10px 80px; border-top: 2px solid #4d4d4d; margin-bottom: 80px; } .btnRequest.none{padding:0 10px; border:none;} .caption{font-size:10px !important; padding:0; margin:0; line-height:1.5 !important; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";} .txtm, .group sup{font-family:"YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;} #slider{position:relative;} #slider .imgLogo, #slider .imgTxt, #slider .caption{position:absolute; z-index:900;} #slider .imgLogo{left:0; bottom:30px; width:100%; text-align:center;} #slider .imgTxt{ right: 70px; top: 6%; } #slider .caption{right:5px; bottom:5px;} #slider .mainTit {position: absolute; left: 0; right:0; margin:0 auto; width: 60.9375%; text-align: center; top: 15%; display:none;} #slider .mainTit img{opacity:0; float:left;} #slider .mainTit.show img{opacity:1;} #slider #mainTit1{width:29.829%; transition:opacity 1.1s ease-in 0s;} #slider #mainTit2{width:31.709%; transition:opacity 1.1s ease-in .8s;} #slider #mainTit3{width:38.462%; transition:opacity 1.1s ease-in 1.6s;} #slider object {width: 100%; height: 46.6vw;} .animeBox{position:relative;} .animeBox .bnrGd{ position: absolute; left: 10px; bottom: 15px; width: 20%; } .animeBox .bnrGd a{display: block; padding: 5px 0;} #point{ max-width: 1400px; padding: 5px 10px 0; margin: 0 auto 15px; } #point .txt{ padding-right: 0; padding-left: 0; padding-bottom: 20px; border-bottom: 1px solid #606060; text-align: center; margin: 0 0 8px; } .group p{line-height:3; font-size:15px;} .group h2 {font-size: 30px; color: #b0ac80; border-bottom:1px solid #b0ac80; border-top:1px solid #b0ac80; padding:10px 0; margin:0 0 70px; letter-spacing:0.1em; text-align:center; font-weight:bold;} .group h2 span{position:relative; display:inline-block;} .group h2 sup{color:#fff; font-size:8px; position:absolute; top:-2px; right:4em; width:4em; text-align:right; line-height:1;} .group h3{text-align:center; font-size:24px; margin:0 0 20px; letter-spacing:0.1em; font-weight:bold;} .group h3 span{display:inline-block; position:relative;} .group h3 sup{color:#fff; font-size:8px; position:absolute; top:-2px; right:2em; line-height:1;} .group h4{font-size:21px; margin:0 0 20px; line-height:1.8; color:#b0ac80; position:relative; letter-spacing:0.1em; font-weight:bold;} .group h4 sup{position:absolute; color:#fff; font-size:8px; left:10em; line-height:1; top:-2px;} .group .gTxt{text-align:center; padding:0 10px;} .group span.txtSup{position:relative; display:inline-block;} .group span.txtSup sup{position:absolute; top:8%; right:0; width:4em; font-size:8px; color:#fff; line-height:1; text-align:right;} #group1{padding:280px 10px; text-align:center;} #group1 .tit{margin:0 0 80px;} #group1 .row{margin:0 0 30px;} #group2{text-align:center; margin:0 0 180px;} #group2 .caption{text-align:center; padding:10px 0 0 0;} #group2 .gTxt{position:relative; z-index:100;} #group2 figure{position:relative; margin:-12% 0 0 0;} #group2 figcaption{position:absolute; bottom:100px; right:40px;} #group3{margin:0 0 300px;} #group3 .map{position:relative; margin:0 auto 75px; max-width:1184px; width:100%;} #group3 .map figcaption{position:absolute; bottom:15px; right:100px;} #group3 .box{max-width:1060px; padding:0 10px; margin:0 auto; width:100%;} #group3 .boxL{width:58%; float:left;} #group3 .boxL .caption{text-align:left;} #group3 .boxR{width:39.3%; float:right;} #group3 .boxR figcaption{text-align:right; font-size:12px; line-height:1.6; padding:5px 0 0 0;} #group3 .caption{text-align:center; padding:10px 0 0 0;} #group4{margin:0 0 140px;} #group4 .img{position:relative; margin:0 0 30px;} #group4 .img .txt{position:absolute; top:0; right:60px;} #group4 .img figcaption{position:absolute; bottom:10px; right:10px; text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 1px #000;} #group4 .img2{text-align:center;} .InfoBox{ padding: 20px 0 10px; text-align: center; font-size: 36px; } .InfoBox span{font-size: 22px;} .mentionBox{padding: 20px; margin: 20px auto 30px; border: 1px solid #ccc; text-align: center; max-width:960px;} .mentionBox .tit{font-size: 16px;} .mentionBox p{font-size: 14px;} .mentionBox a {text-decoration: underline; color: white;} .sougoBnr {padding: 10px 0; margin:0 auto 30px auto; display:flex; flex-wrap:wrap; justify-content:space-between; box-sizing:border-box; max-width:1020px;} .sougoBnr a { display:block; flex-grow:0; flex-shrink:1; flex-basis:calc(50% - 10px); } .sougoBnr a img{width: 100%; height:auto;} .bnrApp{margin: 30px auto;} .bnrApp .pcApp{} .bnrApp .spApp{display: none;} .infoCap{font-size: 10px; line-height: 1.3; margin-bottom: 50px;} .infoImg{ margin-bottom: 10px; text-align: center; padding-top: 40px; } .infoBtnBox ul{margin-bottom: 50px; display: flex; justify-content: center;} .infoBtnBox ul li{margin: 0 10px;} .bnrShunko{margin-bottom: 30px;padding: 0 10px;} .gwTime{ font-size: 16px; width: 800px; margin: 0 auto 80px; border: 1px solid hsla(0,0%,100%,1.00); padding: 20px; } .gwTime .tit{font-size: 18px; text-align: left; margin-bottom: 5px;} .gwTime .tit span{display: inline-block; font-size: 14px; padding-left: 10px;} .gwTime p{text-align: left;} .gwTime table{width: 100%;} .gwTime th{border: 1px #ccc solid; padding: 5px 5px 5px 15px ; font-weight: normal; text-align: left;} .gwTime td{ text-align: center;border: 1px #ccc solid; padding: 5px 5px 5px 5px ; text-align: center;} .bnrKindai{margin-bottom: 50px;} .bnrKindai a{ display: block; margin:0 auto 50px; font-size: 16px; background-color: #fff; color: black; max-width: 800px; padding: 20px; border-radius: 3px;} .bnrKindai span{font-size: 10px; display: inline-block; background-color: #A40002; color: white; padding: 1px 5px; margin-right: 8px;} .bnrSoudan{text-align: center; padding: 15px;} .cp201912{text-align: center; max-width: 960px; margin: 0 auto 50px; text-align: center;} .cp201912L{float: left; width: 50%;} .cp201912R{float: right; width: 50%;} .senchakuPrice{margin-bottom: 40px;} .holiday{ margin: 20px auto; max-width: 800px; width: 90%; border: 1px solid #ccc; padding: 15px; line-height: 1.6; text-align: left; font-size: 14px; background-color: white; clear: both; color: black; } .holiday b{ display: block; } .holiday a{text-decoration: underline; color: black} .holiday ul.cp_list { padding:0.5em; list-style-type:none; } .holiday ul.cp_list li { position:relative; padding: 0em 0.3em 0.3em 1.3em; margin-bottom: 6px; } .holiday ul.cp_list li:last-of-type { margin-bottom: 0px; } .holiday ul.cp_list li::before { position: absolute; content: ''; display: block; top: 0.5em; left: 0; width: 6px; height: 6px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(-45deg); } /* add 20.05.08 modal */ html.noscl, body.noscl{ overflow: hidden;} .entryMdBtn, .mdBtnClose{ cursor: pointer;} #entryMdWrap .mdWrap{ visibility: hidden; opacity: 0; transition: all .3s; -webkit-transition: all .3s; z-index: 11100;} #entryMdWrap.active .mdWrap{ visibility: visible; opacity: 1; overflow: hidden;} #entryMdWrap .mdWrap{ position: fixed; top: 40px; left: 40px; right: 40px; bottom: 40px; z-index: 11100; pointer-events: none;} #entryMdWrap .mdInner{ background: #fff; max-width: 1000px; height: 100%; margin: 0 auto; pointer-events: auto; overflow-y: scroll;} #entryMdWrap .mdInCont{ padding: 40px;} #entryMdWrap .mdLayer{ background: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 10000; visibility: hidden; opacity: 0; transition: all .3s; -webkit-transition: all .3s;} #entryMdWrap.active .mdLayer{ visibility:visible; opacity: 1; overflow: hidden;} #entryMdWrap .mdInner .colWrap{ display: flex; justify-content: space-between;} #entryMdWrap .mdInner .colWrap>li{ flex-basis: calc((100% - 60px)/3); display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #c0c0c0; padding: 20px; border-radius: 6px;} #entryMdWrap .mdInner li li{ text-align: center; margin-top: 10px;} #entryMdWrap .mdInner a:hover img{ opacity: 0.8;} #entryMdWrap .mdBtnWrap{ text-align: center; margin-top: 40px;} #entryMdWrap .mdEntryWrap{ text-align: center; padding-bottom: 60px; background: url(../../img/online/md_arrow.png) no-repeat 50% 100%; margin: 30px 0;} #entryMdWrap .mdInner .mdTit{ color: #1f716f; font-size: 30px; text-align: center; margin-bottom: 20px; font-weight: bold;} #entryMdWrap .mdInner li .mdInTit{ color: #1f716f; font-size: 20px; text-align: center; margin-bottom: .5em;} #entryMdWrap .mdInner li .mdInTit span{ display: inline-block; background-repeat: no-repeat; background-position: 0 50%;} #entryMdWrap .mdInner li:first-child .mdInTit span{ padding-left: 20px; background-image: url(../../img/online/icon_tel.png);} #entryMdWrap .mdInner li:nth-child(2) .mdInTit span{ padding-left: 30px; background-image: url(../../img/online/icon_pc.png);} #entryMdWrap .mdInner li:nth-child(3) .mdInTit span{ padding-left: 25px; background-image: url(../../img/online/icon_mail.png);} #entryMdWrap .mdInner li .btnBox{ margin-top: 1em;} #entryMdWrap .mdInner .mdTxt{ text-align: center; font-size: 16px;} #entryMdWrap .mdInner .howtoWrap{ margin-top: 20px;} .mdBnrWrap { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; background-image: url(../../img/online/bg_onlinesoudan.jpg); max-width: 1024px; margin: 60px auto 50px;} .mdBnrWrap .mdLinkWrap{ padding: 5% 0; width: 85%; margin: 0 auto;} .mdBnrWrap .mdLinkWrap ul{display: flex; justify-content: space-between; flex-wrap: wrap;} .mdBnrWrap .mdLinkWrap li{ flex-basis: calc((100% - 20px)/2); max-width: calc((100% - 20px)/2); text-align: center;} /*.mdBnrWrap .mdLinkWrap li:first-child{ flex-basis: 100%; max-width: none; margin-bottom: 20px;} .mdBnrWrap .mdLinkWrap li:first-child img{ max-width: calc((100% - 20px)/2);}*/ .mdBnrWrap .mdLinkWrap li:nth-child(2){ margin-left: 20px;} .mdBnrWrap .mdLinkWrap li a:hover img{ opacity: 0.8;} .btnPctChirashi a{color:white; font-size: 16px; margin-bottom: 80px; display: block;} .bnrShunkoB{max-width:800px; margin-bottom: 40px;} .bnrShunkoB .colL{float: left;} .bnrShunkoB .colR{float: right;} .saishuPrice{ margin-bottom: 10px; } .saishuPrice a { background-color:#988565; color: #FFF; font-size: 20px; display: block; max-width: 600px; padding: 15px 20px; margin: auto;} @media only screen and (max-width:1500px){ #slider .imgTxt{ width: 95px; } #group4 .img .txt{width:80px; right:20px;} } @media only screen and (max-width:1200px){ #slider .imgLogo{width:80%; left:10%;} #slider .imgTxt{width:7%; top:5%; right:30px; text-align:right;} .group h2{font-size:28px;} #group4 .img .txt{width:6.5%;} } @media only screen and (max-width:1000px){ #group1 .tit{max-width:480px; margin:0 auto 80px; width:80%;} #group3 .box{max-width:620px;} #group3 .boxL{width:100%; margin:0 0 40px; float:none;} #group3 .boxR{max-width:408px; margin:0 auto; float:none; width:100%;} #group3 .map figcaption{right:10px;} #group4 .img2{max-width:380px; margin:0 auto; width:80%;} } @media only screen and (max-width:750px){ .caption{font-size:2vw !important;} .animeBox .bnrGd{display: none;} #slider .imgLogo{width:90%; left:5%;} #slider .imgTxt{ width: 13%; top: 5%; right: 10px; } #slider .mainTit {top: auto; bottom: 15%; width: 85%;} #slider #mainTit1{width:49.53125%;} #slider #mainTit2{width:50.46875%;} #slider #mainTit3{width:100%;} #slider object {width: 100%; height: 80.8vw;} #point {padding: 0;} #point .txt{border:none;} .group p{font-size:3vw;} .group h2{font-size: 5vw;} .group h2 sup{right:5em;} .group h3{font-size: 4vw;} .group h4{font-size: 3.8vw;} .group h4 sup{left:13em;} .group .gTxt{text-align:left;} .group .gTxt p br{display:none;} .group span.txtSup sup{right:0;} #group1{display:none;} #group1{padding:20% 10px; text-align:left;} #group1 .tit{margin:0 auto 40px;} #group1 p br{display:none;} #group2{margin:0 0 10%; padding:20% 0 0 0;} #group2 .caption{text-align:left;} #group2 figure{margin:-5% 0 0 0;} #group2 figcaption{bottom:0; right:10px;} #group3{margin:0 0 20%;} #group3 .box{max-width:750px; padding:0;} #group3 .boxL{padding:0 10px;} #group3 .box p br{display:none;} #group3 .boxR figcaption{font-size:2.5vw;} #group4{margin:0 0 20%;} #group4 .img .txt{width:10%; right:0;} #group4 .img figcaption{right:auto; left:10px; bottom:5px;} .InfoBox{font-size: 28px; padding: 10px;} .infoBtnBox ul{margin-bottom: 50px; display: block;} .infoBtnBox ul li {border-bottom: 30px;} .sougoBnr a { flex-basis:100%; margin:0 0 10px 0; } .gwTime{width: 90%;} .gwTime .tit{font-size: 18px; text-align: left; margin-bottom: 5px;} .gwTime .tit span{display: block;} .gwTime th{ display: block; border-top: 3px #ccc solid;} .gwTime td{ display: block; text-align: left;padding: 5px 5px 5px 15px ;} .bnrKindai a{ font-size: 4vw;} .cp201912L{float: none; width: 100%;margin-bottom: 20px} .cp201912R{float: none; width: 100%;} /* add 20.05.11 modal */ .mdBnrWrap .mdLinkWrap{ padding: 20px 0 4%; width: 85%; margin: 0 auto;} #entryMdWrap .mdWrap{ top: 50px; left: 20px; right: 20px; bottom: 50px;} #entryMdWrap .mdInCont{ padding: 30px 15px;} #entryMdWrap .mdInner{ overflow-y: scroll;} #entryMdWrap .mdInner .colWrap{ display: block;} #entryMdWrap .mdInner .colWrap>li{ margin-top: 20px;} #entryMdWrap .mdInner .mdTit{ font-size: 24px;} #entryMdWrap .mdInner .colWrap>li{ padding: 15px;} #entryMdWrap .mdInner li .mdInTit{ font-size: 18px;} #entryMdWrap .mdInner .mdTxt{ text-align: left; font-size: 14px;} #entryMdWrap .mdInner li .btnBox { margin-top: 0;} #entryMdWrap .mdBtnWrap{ margin-top: 15px;} #entryMdWrap .mdInner li li img{ max-width: 320px; width: 100%;} .mdBnrWrap .mdLinkWrap ul{ display: block;} .mdBnrWrap .mdLinkWrap li{ max-width: none;} .mdBnrWrap .mdLinkWrap li:nth-child(2){ margin-left: auto;} .mdBnrWrap .mdLinkWrap li:nth-child(3){ margin-top: 0;} .mdBnrWrap .mdLinkWrap li:nth-child(n+2){ margin-top: 15px;} .bnrShunkoB{padding: 10px;} .bnrShunkoB .colL{float: none; margin-bottom: 20px;} .bnrShunkoB .colR{float: none; } } @media only screen and (max-width:480px){ .btnRequest {padding: 20px 10px 30px;} .caption{font-size:9px !important;} #point .txt{padding:15px 0;} .group p{font-size:14px; line-height:2;} .group h2 {font-size: 17px; margin:0 0 20px; padding:0 10px;} .group h2 sup{right:2em; top:-5px;} .group h3{font-size:16px;} .group h4{font-size:15px;} .group h4 sup{left:7em; top:-7px;} .group span.txtSup sup{top:-5px; right:1.5em;} #group1 .tit{margin:0 auto 25px;} #group1 .row{margin:0 0 15px;} #group3 .boxR figcaption{font-size:11px;} .sougoBnr img{width: 300px;} .bnrApp .pcApp{display: none;} .bnrApp .spApp{display: block;} }