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

/* --------------------------------------------------
	Reset
-------------------------------------------------- */

#customer_header div,
#customer_header dl,
#customer_header dt,
#customer_header dd,
#customer_header ul,
#customer_header ol,
#customer_header li,
#customer_header h1,
#customer_header h2,
#customer_header h3,
#customer_header h4,
#customer_header h5,
#customer_header h6,
#customer_header pre,
#customer_header form,
#customer_header fieldset,
#customer_header input,
#customer_header textarea,
#customer_header p,
#customer_header blockquote,
#customer_header th,
#customer_header td,
#customer_header img,
#customer_footer div,
#customer_footer dl,
#customer_footer dt,
#customer_footer dd,
#customer_footer ul,
#customer_footer ol,
#customer_footer li,
#customer_footer h1,
#customer_footer h2,
#customer_footer h3,
#customer_footer h4,
#customer_footer h5,
#customer_footer h6,
#customer_footer pre,
#customer_footer form,
#customer_footer fieldset,
#customer_footer input,
#customer_footer textarea,
#customer_footer p,
#customer_footer blockquote,
#customer_footer th,
#customer_footer td,
#customer_footer img { margin:0; padding:0; }

#customer_header table,
#customer_footer table {border-collapse:collapse; border-spacing:0; }

#customer_header fieldset,
#customer_header img,
#customer_footer fieldset,
#customer_footer img  { border:0; }

#customer_header address,
#customer_header caption,
#customer_header cite,
#customer_header code,
#customer_header dfn,
#customer_header em,
#customer_header strong,
#customer_header th,
#customer_header var,
#customer_footer address,
#customer_footer caption,
#customer_footer cite,
#customer_footer code,
#customer_footer dfn,
#customer_footer em,
#customer_footer strong,
#customer_footer th,
#customer_footer var { font-style:normal; font-weight:normal; }

#customer_header ol,
#customer_header ul,
#customer_footer ol,
#customer_footer ul { list-style:none; }

#customer_header caption,
#customer_header th,
#customer_footer caption,
#customer_footer th { text-align:left; }

#customer_header h1,
#customer_header h2,
#customer_header h3,
#customer_header h4,
#customer_header h5,
#customer_header h6,
#customer_footer h1,
#customer_footer h2,
#customer_footer h3,
#customer_footer h4,
#customer_footer h5,
#customer_footer h6 { font-size:100%; font-weight:normal; }

#customer_header img,
#customer_footer img { vertical-align:top; }

#customer_header hr,
#customer_footer hr { display:none; }

#customer_header a,
#customer_footer a { border:none; outline:none; }


/* --------------------------------------------------
	Layout
-------------------------------------------------- */
#webc_con{ padding: 20px 0 !important;}

#customer_header ,
#customer_footer { min-width: 0; background: #fff; color: #000; font-size: 16px; font-weight: normal; line-height: 1.5; font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; -webkit-text-size-adjust: 100%; position: relative; font-feature-settings: "palt"; letter-spacing: 0.08em; }

/* ===================================================
Base Common Style （モバイルファースト）
====================================================== */
#customer_header a,
#customer_footer a { color: #000; text-decoration: none;}
#customer_header a:hover,
#customer_footer a:hover{ color: #000; text-decoration: underline;}
#customer_header a:hover img,
#customer_footer a:hover img { opacity: 0.75;}

#customer_header .view_pc,
.view_pc { display: none;}
#customer_header .view_sp,
.view_sp { display: inline-block;}

#customer_header .br_pc,
.br_pc{ display: none;}
#customer_header .br_sp,
.br_sp{ display: block;}

@media screen and (min-width: 601px) {
#customer_header ,
#customer_footer { min-width: 1200px; font-size: 15px; line-height: 1.5; letter-spacing: 0.08em;}

#customer_header .view_pc,
#customer_footer .view_pc { display: inline-block;}
#customer_header .view_sp,
#customer_footer .view_sp { display: none;}

#customer_header .br_pc,
#customer_footer .br_pc{ display: block;}
#customer_header .br_sp,
#customer_footer .br_sp{ display: none;}
}

/* ---------------------------------------------------
Global Header
------------------------------------------------------ */
#g_header { height: 55px; background: #fff; box-shadow: 0px 3px 6px -3px rgba(0,0,0,0.4); position: relative; z-index: 5;}
#g_header .hd_logo{ padding: 7px 0 7px 10px; width: 200px; height: auto; box-sizing: content-box;}
#g_header .hd_logo img{ width: 100%; height: auto;}
#g_header .hd_nav{ display: none;}

@media screen and (min-width: 601px) {
#g_header { display: flex; justify-content: space-between; height: 80px;}
#g_header .hd_logo{ padding: 8px 0 0 30px; width: 29%; max-width: 350px; box-sizing: border-box;}
#g_header .hd_nav{ display: flex; justify-content: space-between; align-items: center; margin: 0 240px 0 0;}
#g_header .hd_nav li{ font-size: 18px; line-height: 1;flex-shrink: 0;}
#g_header .hd_nav li a{ display: flex; align-items: center; height: 80px; padding: 0 8px; position: relative;}
#g_header .hd_nav li a img{max-width: 100%; height: auto; width: auto\9; border: 0; vertical-align: bottom;}
#g_header .hd_nav li a:hover{ text-decoration: none;}
#g_header .hd_nav .tokuten {width: min(369px, 41%);flex-shrink: 1;}

.hover_line { position: relative; display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale;}
.hover_line:before { content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; bottom: -15px; background: #795b00; height: 2px; -webkit-transition-property: left, right; -o-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-timing-function: cubic-bezier(0.12, 0.915, 0.43, 1); -o-transition-timing-function: cubic-bezier(0.12, 0.915, 0.43, 1); transition-timing-function: cubic-bezier(0.12, 0.915, 0.43, 1);}
a:hover .hover_line:before, 
a:focus .hover_line:before, 
a:active .hover_line:before { left: 0; right: 0;}
.current a .hover_line:before { left: 0; right: 0;}

#g_header .hd_nav li:nth-last-child(2) a{ padding: 0 15px 0 8px;}
#g_header .hd_nav li.btn_01 a{ background-color: #795b00; background-image: url("https://www.the-sunplaza.co.jp/common/img/ico_calender_01.svg"); background-repeat: no-repeat; background-position: left 20px center; color: #fff; padding: 0 20px 0 50px; position: fixed; top: 0; right: 90px; width: 150px; box-sizing: border-box; transition: all, 0.5s;}
#g_header .hd_nav li.btn_01 a:hover{ background-color: #B48800;}

}


/* ---------------------------------------------------
Side Menu
------------------------------------------------------ */
#sidemenu { box-sizing: border-box; cursor: pointer; position: fixed; z-index: 21; top: inherit; bottom: 0; right: 0; height: 55px; width: 65px; background: #2d1a13;}
#sidemenu.on{ z-index: 110;}
#sidemenu a{ color: #fff; display: block; width: 100%; height: 100%; }
#sidemenu .bar{ transition: all 0.3s; box-sizing: border-box; position: absolute; height: 2px; width: 100%; text-indent: 100%; white-space: nowrap; overflow: hidden; z-index: 2; transform-origin: center center;}
#sidemenu .bar::after{ content: ""; height: 2px; width: 40px; display: block; background: #fff; position: absolute; top: 0; left: 0;}
#sidemenu .bar:nth-of-type(1) { top: 13px; left: 12px;}
#sidemenu .bar:nth-of-type(2) { top: 20px; left: 12px;}
#sidemenu .bar:nth-of-type(3) { top: 27px; left: 12px; width: 20px;}
#sidemenu .menu{ text-align: center; color: #fff; font-size: 12px; position: absolute; bottom: 5px; left: 0; width: 100%; letter-spacing: 0.05em;}

@media screen and (min-width: 601px) {
#sidemenu { height: 80px; width: 90px; top: 0; bottom: inherit;}
#sidemenu:hover{ background: #48291e; transition: all, 0.5s;}
#sidemenu .bar{ height: 2px;}
#sidemenu .bar::after{ height: 2px; width: 60px;}
#sidemenu .bar:nth-of-type(1) { top: 30px; left: 14px;}
#sidemenu .bar:nth-of-type(2) { top: 40px; left: 14px;}
#sidemenu .bar:nth-of-type(3) { top: 50px; left: 14px; width: 30px;}
#sidemenu .menu{ display: none;}
}


/* ---------------------------------------------------
Global Navigation
------------------------------------------------------ */
#gnav { position: fixed; top: 0; right: 0; bottom: 0; overflow: auto; width: 100%; padding: 0; background-color: #fff; box-sizing: border-box; z-index: 1000; transition: opacity 0.5s, visibility 1s;}
#gnav:not(:target) { opacity: 0; visibility: hidden;}
#gnav:target { opacity: 1; visibility: visible;}
#gnav .gnav_inner{ padding: 70px 6% 50px; width: 100%; min-height: 100%; box-sizing: border-box;}
#sideclose { box-sizing: border-box; cursor: pointer; position: fixed; z-index: 21; top: inherit; bottom: 0; right: 0; height: 55px; width: 65px; background: #2d1a13;}
#sideclose a{ color: #fff; display: block; width: 100%; height: 100%;}
#sideclose .bar{ transition: all 0.3s; box-sizing: border-box; position: absolute; height: 2px; width: 100%; text-indent: 100%; white-space: nowrap; overflow: hidden; z-index: 2; transfcloseorigin: center center;}
#sideclose .bar::after{ content: ""; height: 2px; width: 40px; display: block; background: #fff; position: absolute; top: 0; left: 0;}
#sideclose .bar:nth-of-type(1) {  transform: rotate(135deg); top: 35px; left: -9px;}
#sideclose .bar:nth-of-type(2) { transform: rotate(-135deg); top: 26px; left: 12px; width: 40px;}
#gnav .gnav_01{ text-align: center; font-size: 15px; line-height: 1;}
#gnav .gnav_01 .gnav_logo{ width: 230px; margin: 0 auto;}
#gnav .gnav_01 .gnav_logo img{ width: 230px; height: auto;}
#gnav .gnav_01 .gnav_tel{ padding: 15px 0 0;}
#gnav .gnav_01 .gnav_tel .view_sp{ font-size: 26px; color: #000;}
#gnav .gnav_01 .gnav_open{ padding: 10px 0 20px; display: block;}
#gnav .gnav_02{ font-size: 15px; line-height: 1;}
#gnav .gnav_02 ul:first-of-type{ border-top: solid 1px #ccc;}
#gnav .gnav_02 ul li{ border-bottom: solid 1px #ccc;}
#gnav .gnav_02 ul li a{ display: block; padding: 15px 20px; position: relative; color: #000;}
#gnav .gnav_02 ul li a::after{ content: ""; display: block; position: absolute; top: 0; bottom: 0; right: 5px; margin: auto 0; width: 6px; height: 6px; border-bottom: solid 1px #95712f; border-right: solid 1px #95712f; transform: rotate(-45deg);}
#gnav .gnav_03{ font-size: 15px; line-height: 1;}
#gnav .gnav_03 ul li{ border-bottom: solid 1px #ccc;}
#gnav .gnav_03 ul li a{ display: block; padding: 15px 20px; position: relative; color: #000;}
#gnav .gnav_03 ul li a::after{ content: ""; display: block; position: absolute; top: 0; bottom: 0; right: 5px; margin: auto 0; width: 6px; height: 6px; border-bottom: solid 1px #95712f; border-right: solid 1px #95712f; transform: rotate(-45deg);}
#gnav .gnav_04{ padding: 20px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
#gnav .gnav_04 .gnav_btn_01{ width: 100%; margin: 0 0 15px; background-color: #bb9b41; background-image: url("https://www.the-sunplaza.co.jp/common/img/ico_calender_01.svg"); background-repeat: no-repeat; background-position: calc( 50% - 4.2em ) center; background-size: 22px; text-align: center; font-size: 18px; color: #fff; padding: 20px 0 20px 30px;}
#gnav .gnav_04 .gnav_bnr_01{ width: 100%; margin: 0 0 15px;}
#gnav .gnav_04 .gnav_bnr_01 img{ width: 100%; height: auto;}
#gnav .gnav_05{ display: flex; justify-content: center;}
#gnav .gnav_05 a{ display: block; width: 36px; height: 36px; background-repeat: no-repeat; background-position: center center; background-size: 36px; margin: 0 15px; text-indent: 100%; white-space: nowrap; overflow: hidden; box-sizing: border-box;}
#gnav .gnav_05 a.mail{ background-image: url("https://www.the-sunplaza.co.jp/common/img/ico_mail_01.svg");}
#gnav .gnav_05 a.insta{ background-image: url("https://www.the-sunplaza.co.jp/common/img/ico_insta_01.svg");}
#gnav .gnav_05 a.fb{ background-image: url("https://www.the-sunplaza.co.jp/common/img/ico_fb_01.svg");}
#gnav .gnav_05 a.tw{ background-image: url("https://www.the-sunplaza.co.jp/common/img/ico_tw_01.svg");}
#gnav .gnav_05 a.line{ background-image: url("https://www.the-sunplaza.co.jp/common/img/ico_line_01.svg");}

@media screen and (min-width: 601px) {
#gnav { background-image: url("https://www.the-sunplaza.co.jp/common/img/gnav_bg_01.jpg"); background-repeat: no-repeat; background-position: 0 0; background-size: cover;}
#gnav .gnav_inner{ padding: 50px 60px; width: 700px ; height: auto; margin: 0 0 0 auto; background: #fff;}
#sideclose { height: 80px; width: 90px; top: 0; bottom: inherit;}
#sideclose:hover{ background: #48291e; transition: all, 0.5s;}
#sideclose .bar{ height: 2px;}
#sideclose .bar::after{ height: 2px; width: 60px;}
#sideclose .bar{ height: 3px;}
#sideclose .bar::after{ height: 2px;}
#sideclose .bar:nth-of-type(1) { top: 40px; left: 25px; width: 40px;}
#sideclose .bar:nth-of-type(2) { top: 40px; left: 25px; width: 40px;}
#gnav .gnav_01{ font-size: 17px; padding: 0 0 40px;}
#gnav .gnav_01 .gnav_logo{ width: 360px; margin: 0 auto 30px;}
#gnav .gnav_01 .gnav_logo img{ width: 360px;}
#gnav .gnav_01 .gnav_tel{ padding: 0 15px 0 0; display: inline-block;}
#gnav .gnav_01 .gnav_tel .view_pc{ font-size: 36px;}
#gnav .gnav_01 .gnav_open{ padding: 0; display: inline-block;}
#gnav .gnav_02{ font-size: 17px; display: flex; justify-content: space-between;}
#gnav .gnav_02 ul{ border-top: solid 1px #ccc; width: 280px;}
#gnav .gnav_02 ul li a{ padding: 20px;}
#gnav .gnav_02 ul li a::after{ right: 10px;}
#gnav .gnav_02 ul li a:hover{ background: #f3f1e9; text-decoration: none;}
#gnav .gnav_03{ font-size: 16px; line-height: 1.3; display: flex; justify-content: space-between; padding: 20px 0 0;}
#gnav .gnav_03 ul{ /*width: 33.3%;*/}
#gnav .gnav_03 ul li{ border-bottom: none;}
#gnav .gnav_03 ul li a{ padding: 10px 0 10px 15px;}
#gnav .gnav_03 ul li a::after{ right: inherit; left: 0;}
#gnav .gnav_04{ padding: 20px 0; }
#gnav .gnav_04 .gnav_btn_01{ font-size: 20px; padding: 17px 0 17px 30px;}
#gnav .gnav_04 .gnav_btn_01:hover{ text-decoration: none; background-color: #C4A857;}
#gnav .gnav_04 .gnav_bnr_01{ /*width: 290px;*/ width: 285px; margin: 0 0 15px;}
#gnav .gnav_05 a:hover{ opacity: 0.75;}
}

/* ---------------------------------------------------
Global Footer
------------------------------------------------------ */
#g_footer{ padding: 0 0 80px; border-top: solid 1px #aaa;}
#g_footer .ft_01{ font-size: 15px; line-height: 1.4;}
#g_footer .ft_01 .ft_logo{ width: 230px; height: auto; display: block; margin: 0 auto; padding: 60px 0 20px;}
#g_footer .ft_01 address{ padding: 0 0 30px 0; margin-bottom: 0; line-height: 1.4;}
#g_footer .ft_01 p,
#g_footer .ft_01 .open{ display: block; text-align: center; padding: 0.5em 0 0;}
#g_footer .ft_01 .view_sp{ font-size: 26px;}
#g_footer .ft_01 .ft_btn_01{ display: block; max-width: 300px; width: 92%; margin: 0 auto 15px; background-color: #bb9b41; background-image: url("https://www.the-sunplaza.co.jp/common/img/ico_calender_01.svg"); background-repeat: no-repeat; background-position: calc( 50% - 4.2em ) center; background-size: 22px; text-align: center; font-size: 18px; color: #fff; padding: 15px 0 15px 30px; box-sizing: border-box;}
#g_footer .ft_01 .ft_btn_02{ display: block; max-width: 300px; width: 92%; margin: 0 auto 15px; background-color: #4b4441; text-align: center; font-size: 18px; color: #fff; padding: 15px 0; box-sizing: border-box;}
#g_footer .ft_01 .ft_btn_03{display: block;max-width: 300px;margin: 0 auto 15px;}
#g_footer .ft_02 .acc_tit{     display: block;max-width: 300px; margin: 0 auto; border: solid 1px #000; text-align: center; font-size: 18px; padding: 10px 0; box-sizing: border-box; position: relative;}
#g_footer .ft_02 .acc_tit.active{ border-bottom: none;}
#g_footer .ft_02 .acc_tit::before,
#g_footer .ft_02 .acc_tit::after{ content: ""; display: block; width: 16px; height: 1px; background: #000; position: absolute; top: 22px; right: 10px;}
#g_footer .ft_02 .acc_tit::after{ transform: rotate(90deg);}
#g_footer .ft_02 .acc_tit.active::after{ display: none;}
#g_footer .ft_02 .ft_nav{ display: block; max-width: 300px; width: 92%; margin: 0 auto; border-right: solid 1px #000; border-left: solid 1px #000; border-bottom: solid 1px #000; text-align: center; font-size: 16px; padding: 0 0 10px; box-sizing: border-box; position: relative;}
#g_footer .ft_02 .ft_nav li a{ text-align: left; padding: 5px 10px 5px 25px; width: 100%; box-sizing: border-box; display: block; position: relative;}
#g_footer .ft_02 .ft_nav li a::before{ content: ""; width: 4px; height: 4px; display: block; border-bottom: solid 1px #8d6511; border-right: solid 1px #8d6511; position: absolute; top: 15px; left: 10px; transform: rotate(-45deg);}
#g_footer .ft_02 .ft_nav li > ul li a{ padding: 5px 10px 5px 40px;}
#g_footer .ft_02 .ft_nav li > ul li a::before{ left: 25px;}
#g_footer .ft_03 .ft_icons{ display: flex; justify-content: center; padding: 30px 0;}
#g_footer .ft_03 .ft_icons li a{ display: block; width: 36px; height: 36px; background-repeat: no-repeat; background-position: center center; background-size: 36px; margin: 0 15px; text-indent: 100%; white-space: nowrap; overflow: hidden; box-sizing: border-box;}
#g_footer .ft_03 .ft_icons li a.mail{ background-image: url("https://www.the-sunplaza.co.jp/common/img/ico_mail_01.svg");}
#g_footer .ft_03 .ft_icons li a.insta{ background-image: url("https://www.the-sunplaza.co.jp/common/img/ico_insta_01.svg");}
#g_footer .ft_03 .ft_icons li a.fb{ background-image: url("https://www.the-sunplaza.co.jp/common/img/ico_fb_01.svg");}
#g_footer .ft_03 .ft_icons li a.tw{ background-image: url("https://www.the-sunplaza.co.jp/common/img/ico_tw_01.svg");}
#g_footer .ft_03 .ft_icons li a.line{ background-image: url("https://www.the-sunplaza.co.jp/common/img/ico_line_01.svg");}
#g_footer .ft_03 .ft_copyright{ width: 100%; border-top: solid 1px #aaa; padding: 10px 0; text-align: center; font-size: 12px; line-height: 1;}

@media screen and (min-width: 601px) {
#g_footer{ padding: 0 0 40px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; width: 92%; max-width: 1200px; margin: 0 auto; border-top:none;}
#g_footer .ft_01{ font-size: 15px; line-height: 1.4; max-width: 400px; width: 33%;}
#g_footer .ft_01 .ft_logo{ width: 300px; margin: 0; padding: 50px 0 10px;}
#g_footer .ft_01 address{ padding: 0 0 30px 0;}
#g_footer .ft_01 p,
#g_footer .ft_01 .open{ display: inline-block; text-align: left; padding: 0.5em 0 0;}
#g_footer .ft_01 .open{ padding: 0.5em 0 0 10px;}
#g_footer .ft_01 .view_pc{ font-size: 26px;}
#g_footer .ft_01 .ft_company{ display: block;}
#g_footer .ft_01 .ft_btn_01{ max-width: 100%; width: 100%; margin: 0 auto 15px; font-size: 18px; padding: 15px 0 15px 30px;}
#g_footer .ft_01 .ft_btn_01:hover{ text-decoration: none; background-color: #C4A857;}
#g_footer .ft_01 .ft_btn_02{ max-width: 100%; width: 100%; margin: 0 auto; font-size: 18px; padding: 15px 0;}
#g_footer .ft_01 .ft_btn_02:hover{ text-decoration: none; background-color: #5A524E; }
#g_footer .ft_btn_03 {display: initial;}
#g_footer .ft_01 .ft_btn_03 img {margin-bottom: 15px;}
#g_footer .ft_01 .ft_btn_03{display: initial;}
#g_footer .ft_02{ max-width: 700px; width: 58%; padding: 50px 0 0;}
#g_footer .ft_02 .acc_tit{ display: none;}
#g_footer .ft_02 .ft_nav{ display: flex; justify-content: space-between; max-width: 100%; width: 100%; margin: 0; border-right: none; border-left: none; border-bottom: none; text-align: left; font-size: 15px; padding: 30px 0 0;}
#g_footer .ft_02 .ft_nav li{ border-bottom: none; }
#g_footer .ft_02 .ft_nav li a{ padding: 4px 10px 4px 30px;}
#g_footer .ft_02 .ft_nav li a::before{ top: 12px; left: 10px;}
#g_footer .ft_02 .ft_nav li > ul{ display: block;}
#g_footer .ft_02 .ft_nav li > ul li{ border-top: none;  border-bottom: none;}
#g_footer .ft_02 .ft_nav li > ul li a{ padding: 2px 10px 2px 45px; color: #666}
#g_footer .ft_02 .ft_nav li > ul li a::before{ top: 10px; left: 25px;}
#g_footer .ft_03{ width: 100%; display: flex; justify-content: space-between; align-items: flex-end;}
#g_footer .ft_03 .ft_icons{ justify-content: flex-start; padding: 0; width: 400px;}
#g_footer .ft_03 .ft_icons li a{ margin: 0 35px 0 0;}
#g_footer .ft_03 .ft_icons li a:hover{ opacity: 0.75;}
#g_footer .ft_03 .ft_copyright{ width: 700px; border-top: none; padding: 30px 0 0; text-align: right; font-size: 12px; line-height: 1;}
}

/* ---------------------------------------------------
Return to pagetop Overwrite
------------------------------------------------------ */
#webc_con .webc_pagetop{ bottom: 65px !important; right: 12px;}