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

#main_img{ background: url("../../facility/img/tit.jpg") no-repeat center center;background-size: cover;}

#lead_col .inner { position: relative;}
#lead_col .inner::after { content:""; clear:both; display: block; height:0;}
#lead_col h2,
#lead_col p.copy{-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; position: absolute; }
#lead_col h2 { font-size:50px; top:100px; left:130px;}
#lead_col p.copy {top:100px; left:60px;}
#lead_col img{ float:right; width:1000px;}
#lead_col p:not([class]) { clear:both; float:right; margin-top:30px; width:800px; }

@media screen and (max-width: 600px) {
                        #lead_col h2,
                        #lead_col p.copy{font-size:18px; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; position: relative; text-align: center; }
                        #lead_col p.copy .wbr { display: block; }
                        #lead_col h2 { font-size:30px; top:0; left:0;}
                        #lead_col p.copy {top:0; left:0;}
                        #lead_col img{float:none; width:100%; }
                        #lead_col p:not([class]) { float:none; margin-top:10px; width:90%; }
}

/*---------------------------------------------------
common
------------------------------------------------------ */
.marker { display: flex; margin:0 auto; padding:0 0 50px 0; width:1050px; }
.marker::before { top:15px;}
.marker dt { font-size:20px; padding-left:40px; width:280px; box-sizing: border-box;}
.marker dd { padding-top:5px;}
div[id^="sec"]{ padding:50px 0;}
div[id^="sec"]>span,
div[id^="sec"] .inner>span{ display: flex; width:100%;}
.pbtn {text-align: center; width:12em;}

.item { display: flex; flex-direction: row-reverse; margin: 50px 0;  width:925px;}
.item dt { margin-left:15px; width:450px;}
.item dd h3 { font-size:30px; margin:50px 0; text-align: center;}
.item dd p  { margin-bottom:10px;}

@media screen and (max-width: 600px) {
                        .marker { flex-direction: column; padding:0 0 25px 0; width:90%; }
                        .marker dt { font-size:20px; width:100%;}
                        .item { flex-direction: column; margin: 25px 0; width:100%;}
                        .item dt { margin-left:0; width:100%;}
                        .marker dd { padding-top:0;}
                        .item dd h3 { font-size:24px; margin:5px 0 25px 0; text-align: center;}
                        div[id^="sec"]{ padding:25px 0;}
                        div[id^="sec"]>span,
                        div[id^="sec"] .inner>span{ display: block; margin:0 auto; width:90%;}
                        
                        .inner { margin: 0 auto; width:90%;}
}
/*---------------------------------------------------
sec1
------------------------------------------------------ */
#sec1 { margin:0 auto; width:1200px;}
#sec1::after{content:""; display: block; clear:both; height:0;}
#sec1 .box_ojc{ float:right; height:450px; width:840px;}
#sec1 .marker { display: block; float:left; margin:0; width:245px;}

@media screen and (max-width: 600px) {
                        #sec1 { width:90%;}
                        #sec1 .box_ojc{ float:none; height:auto; width:100%;}
                        #sec1 .marker { float:none; margin:0; width:100%;}
}

/*---------------------------------------------------
sec2
------------------------------------------------------ */
#sec2 { background:url("../img/pager01.jpg");}
#sec2 .inner>p { padding:50px 0; text-align: center;}
#sec2 .inner>span img { width:-webkit-calc(-webkit-calc(100% - 100px)/ 3); width:calc(calc(100% - 100px)/ 3);}
#sec2 .inner>span img:nth-of-type(2){ margin: 0 50px;}
#sec2 .item { margin-left:250px;}
#sec2 .item h3 span { background:rgba(184,132,2,.25); display: block; font-size:15px; margin:0 auto; width:7em;}

@media screen and (max-width: 600px) {
                        #sec2 .inner>span img { width:100%;}
                        #sec2 .inner>span img:nth-of-type(2){ margin: 5px 0;}
                        #sec2 .item { margin-left:0;}
}

/*---------------------------------------------------
sec3
------------------------------------------------------ */
#sec3 { margin:0 auto; width:1200px;}
#sec3>span img  { width:50%;}
#sec3 .item { margin-left:250px;}

@media screen and (max-width: 600px) {
                        #sec3 { width:90%;}
                        #sec3>span img  { margin-bottom:5px; width:100%;}
                        #sec3 .item { margin-left:0;}
}

/*---------------------------------------------------
sec4
------------------------------------------------------ */
#sec4 { background:url("../img/pager01.jpg");}
#sec4 .inner>span img { width:-webkit-calc(-webkit-calc(100% - 50px)/ 3); width:calc(calc(100% - 50px)/ 3);}
#sec4 .inner>span img:nth-of-type(2){ margin: 0 25px;}

@media screen and (max-width: 600px) {
                        #sec4 .inner>span img { width:100%;}
                        #sec4 .inner>span img:nth-of-type(2){ margin: 5px 0;}
}

/*---------------------------------------------------
sec5
------------------------------------------------------ */
#sec5 { margin:0 auto; width:1200px;}
#sec5>ul {display: flex;}
#sec5>ul li { width:-webkit-calc(-webkit-calc(100% - 6px)/ 3); width:calc(calc(100% - 6px)/ 3); text-align: center;}
#sec5>ul li:nth-of-type(2){ margin: 0 3px;}
#sec5>ul li dt { font-size:30px; padding:10px 0 ;}
#sec5 .item { display: block; width:1200px; }
#sec5 .item dt { float:right; width:880px; }
#sec5 .item dt img { width:-webkit-calc(50% - 2px); width:calc(50% - 2px);}
#sec5 .item dt img:first-of-type{ margin-right:2px;}
#sec5 .item h3 .wbr { display: block;}
#sec5 .item dd p { clear:both; padding:50px 0;}
#sec5 .item dd img { float:left; margin:-15px 15px 0 0; width:345px;}
#sec5 .pbtn { border:1px solid;display: block; float:left; margin:30px 0 0 0; padding:5px 17px 5px 30px; position: relative; width:285px;}
#sec5 .pbtn small { font-size:13px;}
#sec5 .pbtn::after { content:none;}
#sec5 .pbtn::before {content:""; display: block; height:20px; width:20px; background:url("../../common/img/ico_shop.svg")no-repeat; background-size:20px auto;
                    position:absolute;left:15px; top:10px; }
#sec5 .pbtn:hover { background:#eee;}

@media screen and (max-width: 600px) {
                        #sec5 { margin:0 auto; width:90%;}
                        #sec5>ul {flex-direction: column; }
                        #sec5>ul li { margin-bottom:35px; width:100%;}
                        #sec5>ul li:nth-of-type(2){ margin:0 0 35px 0;}
                        #sec5>ul li dt { font-size:24px; padding:5px 0 10px 0 ;}
                        #sec5 .item { width:100%; }
                        #sec5 .item dt { float:none; width:100%; }
                        #sec5 .item dt img { margin-bottom:5px; width:100%;}
                        #sec5 .item dt img:first-of-type{ margin-right:0;}
                        #sec5 .item dd p { clear:both; padding:0 0 25px 0;}
                        #sec5 .item dd img { float:none; margin:0 10% 20px 10%; width:80%;}
                        #sec5 .pbtn { float:none; margin:30px 0; padding:5px 5px 5px 20px; position: relative; width:100%;letter-spacing: 0; box-sizing: border-box;} 
                        #sec5 .pbtn::before {height:17px; width:17px; background-size:17px auto;}
                        #sec5 .pbtn small { font-size:10px;}
}

/*---------------------------------------------------
sec6
------------------------------------------------------ */
#sec6 { background:url("../img/pager01.jpg"); position: relative; padding-top:100px;}
#sec6 .day { background: #d5b45c; border-radius: 50%; color:#f3f1ef; display: block; font-size:24px; height:103px; width:103px; 
                    line-height: 100px; position: absolute; top:-52px; left:50%; margin-left:-52px; text-align: center;}
#sec6 .item {flex-direction:row; margin:0 auto 50px; width:100%;}
#sec6 .item dt { margin:0 15px 0 0 ; width:880px;}
#sec6 .item dt img { width:-webkit-calc(50% - 2px); width:calc(50% - 2px);}
#sec6 .item dt img:first-of-type{ margin-right:2px;}
#sec6 .item dd { width:305px;}
#sec6 .item h3 .wbr { display: block;}
#sec6 .marker:last-of-type dt{ width:500px; }
#sec6 .inner>ul { display: flex; margin:0 auto 50px; width:100%;}
#sec6 .inner>ul li { width:550px;}
#sec6 .inner>ul li:first-of-type { margin-right:100px;}
#sec6 .inner>ul li dt { font-size:30px; text-align: center; padding:10px 0;}

@media screen and (max-width: 600px) {
                        #sec6 .day {font-size:20px; height:88px; width:88px;line-height: 90px;  margin-left:-40px; }
                        #sec6 { padding-top:50px;}
                        #sec6 .item {flex-direction: column; margin:0 auto 50px; width:100%;}
                        #sec6 .item dt { margin:0 ; width:100%;}
                        #sec6 .item dt img { width:100%; margin-bottom:5px;}
                        #sec6 .item dd { width:100%;}
                        #sec6 .marker:last-of-type dt{ margin-bottom:15px; width:100%; }
                        #sec6 .inner>ul {flex-direction: column;}
                        #sec6 .inner>ul li { width:100%;}
                        #sec6 .inner>ul li dt { font-size:24px;}
}

/*---------------------------------------------------
sec7
------------------------------------------------------ */
#sec7 { margin:0 auto; width:1200px;}
#sec7 .marker dt { width:500px;}
#sec7 .marker dt span { font-size:13px; }
#sec7 .marker dd { width:700px;}
#sec7>ul { display: flex; width:100%;}
#sec7>ul li { text-align: center; width:25%;}
#sec7>ul li dt { margin:0 auto; padding:10px 0; position: relative;; text-align: center;}
#sec7>ul li dt::before { content:""; display:inline-block; height:0; width:0; 
                    border-bottom:6px solid #2a2b2b; border-right:3px solid transparent; border-left:3px solid transparent; 
                    position:relative; top:0; left:-10px;}
#sec7>ul li dd span { font-size:13px;}
#sec7>ul li dd img{ margin:0 10px 5px 0; width:18px;}

@media screen and (max-width: 600px) {
                        #sec7 { width:90%;}
                        #sec7 .marker dt,
                        #sec7 .marker dd { width:100%;}
                        #sec7>ul { flex-direction: column;}
                        #sec7>ul li { width:100%;}
}

/*---------------------------------------------------
sec8
------------------------------------------------------ */
#sec8 { margin:0 auto; width:1200px;}
#sec8 .marker { margin:30px auto;}
#sec8 .marker dt { width:500px;}
#sec8 .marker dd { width:700px;}
#sec8 dl.acc { float:left; display: flex; align-items: flex-start; margin:0 30px; width:360px; }
#sec8 dl.acc:last-of-type { width:620px;}
#sec8 .acc dt { display: block; border:1px solid #d4b45d; border-radius: 50%; font-size:18px; height:105px; padding-top:33px; margin-right:20px; 
                    text-align: center; width:105px; box-sizing:border-box;}
#sec8 .acc dd { width:-webkit-calc(100% - 120px); width:calc(100% - 120px);}
#sec8 .acc dt .wbr { display: block;}
#sec8 .acc:last-of-type dt { padding-top:23px;}
#sec8 .acc dd li { padding:8px 0; border-bottom:1px solid #ddd;}
#sec8 .pbtn { clear: both; }

@media screen and (max-width: 600px) {
                        #sec8 { width:90%;}
                        #sec8 .marker { margin-bottom:0;}
                        #sec8 .marker dt,
                        #sec8 .marker dd { width:100%;}
                        #sec8 dl.acc { float:none; flex-direction: column; margin:0 auto 20px; width:90%; }
                        #sec8 dl.acc:last-of-type { width:90%;}
                        #sec8 .acc dt { margin:0 auto;}
                        #sec8 .acc dd { width:100%;}
                        #sec8 .acc dd li { text-align: center;}
}

/*---------------------------------------------------
sec9
------------------------------------------------------ */
#sec9 { margin:50px auto; width:1000px;}
#sec9 h2 { font-size:46px;}
#sec9 dl { display: flex; flex-wrap: wrap; }
#sec9 dt,
#sec9 dd { padding:10px 20px; border-bottom:1px solid #ddd; box-sizing:border-box;}
#sec9 dt { width:25%;}
#sec9 dd { width:75%;}
#sec9 dd ul { padding:10px 0;}

@media screen and (max-width: 600px) {
                        #sec9 { margin:25px auto; width:90%; }
                        #sec9 h2 { font-size:30px;}
                        #sec9 dt{ background:#efe9e0;}
                        #sec9 dd {}
                        #sec9 dt,
                        #sec9 dd {border:none; padding:5px 10px; width:100%;}
                        #sec9 dd .wbr { display: block;}
}