@charset "utf-8";

/* ----------------------------------------------------
base setting
---------------------------------------------------- */

* {  -webkit-box-sizing: border-box;  box-sizing: border-box;}
*:before,*:after {  -webkit-box-sizing: border-box;  box-sizing: border-box;}

html {
  -webkit-tap-highlight-color: transparent;   -moz-text-size-adjust: 100%;  -ms-text-size-adjust: 100%;  -webkit-text-size-adjust: 100%;
  font-size: 62.5%; /* 10px */
}
body { font-size: 1.6rem;
text-rendering: optimizeLegibility;
font-kerning: normal;               
font-variant-ligatures: common-ligatures contextual;
font-feature-settings: "kern", "liga", "clig", "calt";}
#wrapper { margin: 0 auto; position: relative;}

/* ----------------------------------------------------
element base setting
---------------------------------------------------- */

h1, h2, h3, h4, h5, h6, table, ul, ol, p, dl { font-size: 100%; margin: 0;}
ul{ list-style: none; }
dd { margin: 0;}
table, ul, ol, p, dl {margin-bottom: 20px;}
header table, header ul, header ol, header p,  header dl,footer table, footer ul, footer ol, footer p,  footer dl {	margin-bottom: 0px;}

/* link  */
a[href^="tel:"] { cursor: default;}
.clickable { cursor: pointer;}
.clearfix{ zoom:100%;	}
.clearfix:after {	content: ".";	display: block;	height: 0;	clear: both;	visibility: hidden;}

@media (min-width:768px) { /* PC + tablet */
.pcNoDisplay, #ftSlideBlock { display: none !important;}
a:hover[href^="tel:"] { text-decoration:none; }
}

@media (max-width: 1200px) and (min-width: 768px) {/*  tablet */
body {font-size: 1.3vw;}
table, ul, ol, p, dl {margin-bottom: 1.6vw}
}

@media (max-width: 767px) {/*  sp */
body {font-size: 4.17vw;}
.spNoDisplay { display: none;}
a:hover { text-decoration: none !important;}
img { width: 100%;}
table, ul, ol, p, dl {margin-bottom: 2.5vw;}
}

/* ----------------------------------------------------
 calendar
---------------------------------------------------- */
div.cal_wrapper { margin: 0;}
div.cal_wrapper table { width: 100%; margin-bottom: 10px;}
div.cal_wrapper table tr.headline,div.cal_wrapper table td{  background: transparent;}
div.cal_wrapper table.cal tr th {  background: none;}
div.cal_wrapper table.cal tr th p {float: left; margin: 0px 0px 5px;  font-weight: 600;  font-size: 1.4rem;}
div.cal_wrapper table.cal tr th div.cal_ui {float: right;}
div.cal_wrapper table.cal tr th div.cal_ui input { font-size: 1.2rem;  margin: 0px 1px 5px;  padding: 1px 5px;  cursor: pointer;}
div.cal_wrapper table.cal tr td {  font-size: 1.4rem;  text-align: center;  padding: 0px;}
div.cal_wrapper table.cal tr.headline td {padding: 5px;}
div.cal_wrapper table.cal tr td div {position: relative; font-size: 1.4rem;  text-align: center;  padding: 5px;}
div.cal_wrapper table.cal tr td div span { position: absolute;  top: 30px;  left: 0px;  display: none;  width: 180px;  border: solid 1px #EEE;  background-color: #FFF;  text-align: left;  padding: 5px;  z-index: 10;
  color: #000;  font-weight: normal;  line-height: 1.5em;  box-shadow: 1px 1px 3px #666;}
div.cal_wrapper table.cal tr td div.backward {  font-weight: normal; opacity: 0.5;} 
div.cal_wrapper table.cal tr td div.pointer {  cursor: pointer;}
.cal-txt { font-size: 1.4rem;}

@media (max-width: 1200px) and (min-width: 768px) {
div.cal_wrapper table { margin-bottom: 0.83vw;}
div.cal_wrapper table.cal tr th p {font-size: 1.16vw;}
div.cal_wrapper table.cal tr th div.cal_ui input { font-size: 1vw; }
div.cal_wrapper table.cal tr td { font-size:1.16vw;}
div.cal_wrapper table.cal tr.headline td {padding: 0.4vw;}
div.cal_wrapper table.cal tr td div {font-size: 1.16vw; padding: 0.4vw;}
div.cal_wrapper table.cal tr td div span {top: 2.5vw; width: 15vw; padding: 0.4vw;  line-height: 1.5; }
.cal-txt { font-size: 1.16vw;}
}

@media (max-width: 767px) {
div.cal_wrapper table.cal tr th p {ont-size: 4vw;}
div.cal_wrapper table.cal tr th div.cal_ui input { font-size: 3.2vw;}
div.cal_wrapper table.cal tr td {  font-size: 3.7vw;}
div.cal_wrapper table.cal tr.headline td {padding: 0.6vw;}
div.cal_wrapper table.cal tr td div {font-size: 3.7vw; padding: 0.6vw;}
div.cal_wrapper table.cal tr td div span { top: 4vw;  width: 24vw;  padding: 0.4vw; }
.cal-txt { font-size: 3.7vw;}
}

/* --------------------------------------------------
link / list 
----------------------------------------------------- */
.telLink {position: relative; font-weight: 600;}
.telLink::before {content: "phone"; font-family: 'Material Icons';position: absolute; left:0; top: 50%; transform: translateY(-50%); color: #000; font-size: 120%;}

.linkExternal span{position: relative; display: inline-block;}
.linkExternal span::after {content: "open_in_new"; font-family: 'Material Icons';  position: absolute; right: -20px;color: #eee;}

ul.listDot li { padding-left: 2em; position: relative;}
ul.listDot li::before{content: ""; width: 6px; height: 6px; border-radius: 50%; background: #A0CBDB; position: absolute; left: 0.3rem; top: 14px;}
ol.listNum li{ list-style: decimal;  margin-left: 1.5rem;}
dl.listData dt {font-weight: 600;}
ul.listNote li{ text-indent: -1.4rem; padding-left: 1.4rem; font-size: 1.4rem;}
ul.listNote li::before {content: "※";}
ul.listCheck li {padding-left: 2.4rem; position: relative;}
ul.listCheck li::before {content: "check_box"; font-family: 'Material Icons'; position: absolute; left: 0; color: #ea5567;}

@media (max-width: 1200px) and (min-width: 768px) {
.linkExternal span::after {right: -1.6vw;}
ul.listDot li { padding-left: 2vw;font-size: 1.5rem; }
ul.listDot li::before{width: 0.5vw; height: 0.5vw; left: 0.3rem; top: 0.8vw;}
ol.listNum li{ margin-left: 1.25vw;}
ul.listNote li{ text-indent: -1.16vw; padding-left: 1.16vw; font-size: 1.16vw;}
ul.listCheck li {padding-left: 2vw; }
}

@media (max-width: 767px) {
.linkExternal span::after {right: -5vw;}
ul.listDot li { padding-left: 4vw; }
ul.listDot li::before{width: 1.6vw; height: 1.6vw; left: 0; top: 3vw;}
ol.listNum li{ margin-left: 4vw;}
ul.listNote li{ text-indent: -3.7vw; padding-left: 3.7vw; font-size: 3.7vw;}
ul.listCheck li {padding-left: 4.8vw;}
}

/* --------------------------------------------------
table
----------------------------------------------------- */
.tblA, .tblB, .tblC, .tblD { width: 100%; }

.tblB td.inrTblB {padding: 0;}
.tblB td.inrTblB table {width: 100%; margin: 0;}
.tblB td.inrTblB table tr:last-child {border-bottom: 0;}
.tblB td.inrTblB table th {border: 0;}
.tblB td.inrTblB table td {border:0;}

@media (max-width: 767px) {
.tblA.tblVertical th {width: 100%; display: block; }
.tblA.tblVertical td {width: 100%; display: block; border-bottom: 0; border-top: 0;}

.tblB th, .tblB td {width: 100%; display: block;}
.tblB th,.tblB td {border-bottom: 0 !important; }
.tblB td.inrTblB table tr {border: 0  !important;}
.tblB td.inrTblB table th {border: 0 !important; background: #f3f3f3; color: #333;}
.tblB td.inrTblB table td {border: 0 !important;}

.tblC {display: flex; display: -webkit-flex;}
.tblC th, .tblC td {display: block; width:100%;}
.tblC thead {width: 30%; display: block;}
.tblC thead tr {display: block; width: 100%;}
.tblC thead tr th {border-right: 0; border-top: 0; display: flex; display: -webkit-flex; align-items: center; justify-content: center;}
.tblC tbody {width: 70%; display: flex; display: -webkit-flex;}
.tblC tbody tr {display: block; width: 50%;}
.tblC tbody tr td {border-top: 0;}
.tblC tbody tr:first-child td {border-right: 0; border-top: 0;}

.tblD thead {display: none;}
.tblD tr {width: 100%;}
.tblD td {display:block;  width: 100%; border-top: none !important;}
.tblD td:before {content: attr(data-label); width: 100%; display: block;}
.tblD td span {width:100%; display: block;}
.tblD td:first-child {display: block; text-align: center;}
.tblD td:first-child:before {content: none;}
.tblD td:last-child {border-bottom: 0 !important;}

.tbl-scroll {cursor: grab;}
.tbl-scroll  table {width: 100%;}
.tbl-scroll {overflow: auto; white-space: nowrap;}
.tbl-scroll::-webkit-scrollbar{ height: 3px;}
.tbl-scroll  .tblE th { position: -webkit-sticky; position: sticky; left: 0; z-index: 2;}
.tbl-scroll  .tblE th::before {content: ""; width: 1px; height: 100%; position: absolute; left: -1px; top: 0;}
.tbl-scroll  .tblE th::after {content: ""; width: 1px; height: 100%;position: absolute; right: -1px; top: 0;}

}

/* --------------------------------------------------
column list 
---------------------------------------------------- */
.col2, .col3,.col4 {display: flex; display: -webkit-flex; justify-content: space-between; flex-wrap: wrap;  -webkit-flex-wrap: wrap;}
.col2 li { width: 49%;  margin: 20px 0 0;}
.col3 li {width: 32%; margin:  20px 0 0;}
.col4 li {width: 23.5%; margin:  20px 0 0;}

.col2 li:first-child, .col2 li:nth-child(2),
.col3 li:first-child, .col3 li:nth-child(2), .col3 li:nth-child(3),
.col4 li:first-child, .col4 li:nth-child(2), .col4 li:nth-child(3), .col4 li:nth-child(4)
{margin-top: 0;}

.col3::after {content: ""; display: block; width: 32%; height: 0;}
.col4::before, .col4::after {content: ""; display: block; width: 23.5%; height: 0;}
.col4::before {order: 1;}

@media (max-width: 1200px) and (min-width: 768px) {
.col2 li, .col3 li, .col4 li { margin: .5vw 0 0; }
}

@media (max-width: 767px) {
.col2, .col3, .col4 {display: block;}
.col2.flexNoWrap {display: flex; display: -webkit-flex; justify-content: space-between; flex-wrap: wrap;  -webkit-flex-wrap: wrap;}
.col2 li, .col3 li,.col4 li {width: 100%;  margin: 1vw 0 0;}
/*.col2 li:nth-child(2),.col3 li:nth-child(2), .col3 li:nth-child(3),.col4 li:nth-child(2), .col4 li:nth-child(3), .col4 li:nth-child(4){margin-top: 4vw;}*/
.col3::after, .col4::before, .col4::after {content: none;}
.col2.flexNoWrap li { width: 49%;}
.col2.flexNoWrap li:first-child, .col2.flexNoWrap li:nth-child(2) {margin-top:0;}
}

/* --------------------------------------------------
layout
---------------------------------------------------- */
.flexBox {display: flex; display: -webkit-flex; justify-content: space-between; flex-wrap: wrap;  -webkit-flex-wrap: wrap;  margin-bottom: 40px;}
.floatBox {overflow: hidden; margin-bottom: 40px;}
.flexBox img {width: 100%;}
.floatBox img {width: 100%;}

/* boxlayout */
.flexImg {width: 35%;}
.flexConent{width: 60%;}
.floatBox .floatImg {width: 35%;}
.floatBox .floatR {margin: 0 0 30px 30px;}
.floatBox .floatL {margin: 0 30px 30px 0;}
/* columnLayout */
.flexCol2 .flexColCont {width: 48%; margin: 30px 0 0; }
.flexCol3 .flexColCont {width: 30%; margin: 30px 0 0;}
.flexCol4 .flexColCont {width: 23%; margin: 30px 0 0;}
.flexCol2 .flexColCont:first-child, .flexCol2 .flexColCont:nth-child(2),
.flexCol3 .flexColCont:first-child, .flexCol3 .flexColCont:nth-child(2), .flexCol3 .flexColCont:nth-child(3){margin-top: 0;}
.flexCol3::after {content: ""; display: block; width: 30%; height: 0;}

@media (max-width: 1200px) and (min-width: 768px) {
.flexBox, .floatBox {margin-bottom: 3.3vw;}
.flexCol2 .flexColCont, .flexCol3 .flexColCont {margin: 2.5vw 0 0; }
.floatBox .floatR {margin: 0 0 2.5vw 2.5vw;}
.floatBox .floatL {margin: 0 2.5vw 2.5vw 0;}
}

@media (max-width: 767px) {
.flexBox { display: block; margin-bottom: 8vw;}
.floatBox { margin-bottom: 8vw;}
/* boxlayout */
.flexImg, .flexConent {width: 100%; margin: 4vw 0;}
.flexBox.flexReverse { display: flex !important; display: -webkit-flex !important; -webkit-flex-direction: column-reverse; flex-direction: column-reverse;}
.flexBox.flexVariable { display: flex !important; display: -webkit-flex !important; justify-content: space-between; }
.flexBox.flexVariable .flexImg {width: 35%;}
.flexBox.flexVariable .flexConent {width: 60%;}
.flexNoImg .flexImg {display: none;}
.floatBox .floatR {margin: 0 0 3vw 3vw;}
.floatBox .floatL {margin: 0 3vw 3vw 0;}
/* columnLayout */
.flexCol2.flexNoWrap { display: flex !important; display: -webkit-flex !important; justify-content: space-between; margin-bottom: 8vw; flex-wrap: wrap;  -webkit-flex-wrap: wrap;}
.flexCol2 .flexColCont, .flexCol3 .flexColCont {width: 100%; margin: 4vw 0 0;}
.flexCol2.flexNoWrap .flexColCont  {width: 48%; margin: 4vw 0 0;}
.flexCol2 .flexColCont:nth-child(2),.flexCol3 .flexColCont:nth-child(2), .flexCol3 .flexColCont:nth-child(3) {margin-top: 4vw;}
.flexCol2.flexNoWrap .flexColCont:first-child, .flexCol2.flexNoWrap .flexColCont:nth-child(2) {margin-top: 0;}
}

/* --------------------------------------------------
step
---------------------------------------------------- */
.stpBox {display: flex; display: -webkit-flex; justify-content: space-between; padding: 40px; background: #f3f3f3; position: relative; margin-bottom: 60px;}
.stpBox:last-child {margin-bottom: 0;}
.stpBox::after {content: ""; width: 15px; height: 15px; border-right: 2px solid #ccc; border-bottom: 2px solid #ccc; position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%) rotate(45deg);}
.stpBox:last-child::after {content: none; }
.stpContent {width: 65%;}
.stpImg {width: 30%;}
.stpImg img {width: 100%;}
.stpBox.stpNoImg .stpContent{width: 100%;}

@media (max-width: 1200px) and (min-width: 768px) {
.stpBox {padding: 3.3vw; margin-bottom: 5vw;}
.stpBox::after {width: 1.25vw; height: 1.25vw; bottom: -2.5vw;}
}

@media (max-width: 767px) {
.stpBox {display: block; padding: 6vw;  margin-bottom: 10vw;}
.stpBox::after { width: 5vw; height:  5vw;  bottom: -6vw;}
.stpContent, .stpImg {width: 100%;}
.stpImg {margin-top: 5vw;}
}

/* --------------------------------------------------
access
---------------------------------------------------- */
.acsDirection {display: flex; display: -webkit-flex; justify-content: space-between;flex-wrap: wrap;  -webkit-flex-wrap: wrap; }
.acsDirection li {width: 31%; margin: 3% 0 0;}
.acsDirection li p {margin-bottom: 10px;}
.acsDirection li p img {width: 100%;}
.acsDirection::after {content: ""; display: block; width: 31%; height: 0;}
.acsDirection li:first-child, .acsDirection li:nth-child(2), .acsDirection li:nth-child(3) {margin-top: 0;}

@media (max-width: 767px) {
.acsDirection {display: block;  }
.acsDirection li {width: 100%; margin: 3vw 0 0; display: flex; display: -webkit-flex; justify-content: space-between;}
.acsDirection li p {width: 45%;}
.acsDirection li div {width: 50%;}
.acsDirection li:nth-child(2), .acsDirection li:nth-child(3) {margin-top: 3vw;}
}


/* ----------------------------------------------------
helperClass
---------------------------------------------------- */
/* align */
.alignC { text-align: center !important;}
.alignR { text-align: right !important;}
.alignL { text-align: left !important;}

/* float */
.floatR { float: right;}
.floatL { float: left; }

/* img float */
.fl { display:inline; float: left; }
.fr { display:inline; float: right; }

/* margin-bottom */
.mb00 {margin-bottom:  0px !important;}	.mb05 {margin-bottom:  5px !important;}
.mb10 {margin-bottom: 10px !important;}	.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}	.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}	.mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;}	.mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;}	.mb55 {margin-bottom: 55px !important;}
.mb60 {margin-bottom: 60px !important;}	.mb65 {margin-bottom: 65px !important;}

/* margin-top */
.mt00 {margin-top:  0px !important;}	.mt05 {margin-top:  5px !important;}
.mt10 {margin-top: 10px !important;}	.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}	.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}	.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}	.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}	.mt55 {margin-top: 55px !important;}

/* padding-top */
.pt00 {padding-top:  0px !important;}	.pt05 {padding-top: 5px !important;}
.pt10 {padding-top: 10px !important;}
.pt20 {padding-top: 20px !important;}
.pt30 {padding-top: 30px !important;}
.pt40 {padding-top: 40px !important;}
.pt60 {padding-top: 60px !important;}

/* padding-bottom */
.pb00 {padding-bottom:  0px !important;}
.pb10 {padding-bottom: 10px !important;}

/* img */
.w120 { width:120px !important;}
.w140 { width:140px !important;}
.w150 { width:150px !important;}
.w200 { width:200px !important;}
.w240 { width:240px !important;}
.w280 { width:280px !important;}
.w300 { width:300px !important;}
.w320 { width:320px !important;}
.w400 { width:400px !important;}
.w640 { width:640px !important;}
.w840 { width:840px !important; max-width: 100%;}

@media (min-width:768px) {
/* img */
 img.fl { margin: 0 40px 25px 0;}
 img.fr { margin: 0 0 25px 40px;}
}

@media (max-width: 1200px) and (min-width: 768px) {
/* img (<1200) */
.w120 { width: 10vw !important;}
.w140 { width: 11.6vw !important;}
.w150 { width: 12.5vw !important;}
.w200 { width: 16.6vw  !important;}
.w240 { width: 20vw !important;}
.w280 { width: 23.3vw !important;}
.w300 { width: 25vw !important;}
.w320 { width: 26.6vw !important;}
.w400 { width: 33.3vw !important;}
.w640 { width: 53.3vw !important;}
.w840 { width: 70vw !important; max-width: 100%;}

/* img float  (<1200) */
 img.fl { margin: 0 3.33vw 2vw 0;}
 img.fr { margin: 0 0 2vw 3.33vw;}
}

@media (max-width: 767px) {
/* img (sp) */
.w20p { width: 20% !important;}
.w25p { width: 25% !important;}
.w30p { width: 30% !important;}
.w35p { width: 35% !important;}
.w40p { width: 40% !important;}
.w50p { width: 50% !important;}
.w60p { width: 60% !important;}
.w70p { width: 70% !important;}
.w80p { width: 80% !important;}
.w100p{ width:100% !important;}

/* img float(sp) */
 .spfl { margin:0 2vw 2vw 0;}
 .spfr { margin:0 0 2vw 2vw;}
}

