@charset "utf-8";

@import url("custom/margin.css");
@import url("custom/padding.css");
@import url("custom/width.css");

/*========================================================================================================================


  ◇◆◇ レイアウト ◇◆◇
  
  1.  header
  2.  nav
  3.  contents
  4.  footer
  99. parts  
  
  
========================================================================================================================*/

/*----------------------------------------------------------------------------------------------------

  1. header
  
----------------------------------------------------------------------------------------------------*/
header {
    position: fixed;
    top: 0;
    width: 100%;
    border-top: 3px solid #d90429;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0px 0px 24px 0px rgba(14,162,23,0.06);
    z-index: 11;
}

header .ctBlock {
    position: relative;
    height: 156px;
}

header .site-copy  {
    position: absolute;
    top: 40px;
    left: 0;
}

header .logo {
    position: absolute;
    top: 75px;
    left: 0;
    width: 260px;
}

header .shopinfo {
    position: absolute;
    top: 40px;
    right: 0;
    text-align: right;
    font-weight: bold;
}
header .shopinfo .opentime {
    font-size: 93.8%;
}
header .shopinfo .tel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: inherit;
    text-decoration: none;
}
header .shopinfo .tel img {
    width: 30px;
    margin-right: 0.25em;
}

header nav {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
}
header nav a,
header nav a:visited {
    display: inline-block;
    padding: 0.25em 0.5em 1em;
    margin-right: 1em;
    color: inherit;
    font-weight: bold;
    text-decoration: none;
    transition: .2s;
    position: relative;
}
header nav a::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: #ef233c;
    transform-origin: left bottom;
    transform: scale(1, 0);
    transition: transform .3s;
}
header nav a:last-child {
    margin-right: 0;
}
header nav a:hover {
    color: #fff;
}
header nav a:hover::before {
    transform-origin: left top;
    transform: scale(1, 1);
}
header nav a.active {
    color: #fff;
    background: #ef233c;
}

@media screen and (max-width:1100px) {
    header .ctBlock {
        height: 190px;
    }
    header nav {
        width: 100%;
        justify-content: space-between;
    }
    header .shopinfo {
        top: 68px;
    }
}

@media screen and (max-width:810px) {
    header .ctBlock {
        height: 140px;
    }

    header .site-copy  {
        top: 24px;
        left: 0;
    }

    header .logo {
        top: 59px;
    }

    header .shopinfo {
        top: 54px;
        right: 100px;
    }
    
    header nav {
        display: none;
    }
}

@media screen and (max-width:760px) {
    header .shopinfo {
        display: none;
    }
}

@media screen and (max-width:700px) {
    header .ctBlock {
        height: 170px;
    }

    header .logo {
        top: 96px;
    }
}



/*-----------------------------------------------------------------------------------
  SPnav
-----------------------------------------------------------------------------------*/

html.openNav_on { overflow-y:hidden; }

#openNav-warp {
  width:0;
  height:0;
  position:fixed;
  top:0;
  right:0;
  z-index:3;
  overflow:hidden;
}

#openNav-warp.on {
  width:100%;
  height:100%;
  top:0;
  right:0;
  overflow-y:auto;
  background-color:#fff;
}

.lte-ie8 #openNav-warp {
    display:none !important;
}

.lte-ie8 #openNav-warp.on { min-width:1020px; }

@media screen and (min-width:1021px) {
  #openNav-warp.on {
    min-width:1020px;
  }
}

#openNav_sw {
  width:100%;
  height:100vh;
  filter:alpha(opacity=0);
  opacity:0;
  -moz-opacity:0;
  transition:opacity 0.2s ease;
}

#openNav-warp.on #openNav_sw {
  filter:alpha(opacity=100);
  opacity:1;
  -moz-opacity:1;
}

#openNav {
  height:100%;
  background-color:#F74F63;
}

#openNav a { transition:opacity 0.2s ease; }

#openNav a,
#openNav a:visited { color:#fff; text-decoration:none; }

#openNav nav {
  width:100%;
  padding:200px 1.5rem 2rem 1.5rem;
  font-size:120%;
  display: block;
  box-sizing: border-box;
}

#openNav nav > ul.mnav {
  list-style:none;
}

#openNav nav > ul.mnav > li {
  width:100%;
}

#openNav nav > ul.mnav > li > a {
    border-bottom:1px solid rgba(255,255,255,0.2);
    width:100%;
    padding:0.7rem 1rem;
    display:block;
    font-size:118.8%;
    transition: 0.2s;
    box-sizing: border-box;
}

#openNav nav > ul.mnav > li:first-child a {
    border-top:1px solid rgba(255,255,255,0.2);
}
  
#openNav nav > ul.mnav > li.active > a,
#openNav nav > ul.mnav > li > a:hover {
    background-color:rgba(255,255,255,0.2);
}

#openNav nav > ul.mnav > li > a > i {
    float: right;
    margin-top: 0.5em;
    margin-right: 0.5em;
    transition: 0.2s;
}
#openNav nav > ul.mnav > li > a:hover > i {
    margin-right: 0;
}


/* ボタン ----------------------------------------*/

#openNav_btn {
    display: none;
    position: absolute;
    top: 49px;
    right: 0;
    cursor:pointer;
    width:75px;
    height:70px;
    background-color:#ef233c;
    border-radius: 6px;
    color: #fff;
    text-align:center;
    text-decoration: none;
    transition: 0.2s all;
}
@media screen and (max-width:810px) {
  #openNav_btn {
    display: inline-block;
  }
}
@media screen and (max-width:700px) {
  #openNav_btn {
    top: 84px;
  }
}

#openNav_btn:hover {
    background-color:#F74F63;
}

/*
#openNav_btn.close {
    position: fixed;
    top: 24px;
    right: 0;
    z-index: 9999;
}
*/

#openNav-warp.on #openNav_btn { position:absolute; }

.lte-ie8 #openNav_btn {
    display:none !important;
}

.openNav_btn_ic,
.openNav_btn_ic span,
.openNav_btn_ic span:before,
.openNav_btn_ic span:after {
    display:inline-block;
    transition:transform .4s, opacity .4s;
    box-sizing:border-box;
    color:#fff;
}
.openNav_btn_ic {
    position:relative;
    width:35px;
    height:27px;
    margin-top: 12px;
}
  
.openNav_btn_ic span,
.openNav_btn_ic span:nth-of-type(2),
.openNav_btn_ic span:nth-of-type(3) {
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background-color:#fff;
}
.openNav_btn_ic span:nth-of-type(1) {
  top:0;
}
.openNav_btn_ic span:nth-of-type(2) {
  top:12px;
}
.openNav_btn_ic span:nth-of-type(3) {
  bottom:0;
}  
#openNav_btn.close .openNav_btn_ic span:nth-of-type(1) {
  -webkit-transform:translateY(13px) rotate(-315deg);
  transform:translateY(13px) rotate(-315deg);
}
#openNav_btn.close .openNav_btn_ic span:nth-of-type(2) {
  opacity:0;
}
#openNav_btn.close .openNav_btn_ic span:nth-of-type(3) {
  -webkit-transform:translateY(-13px) rotate(315deg);
  transform:translateY(-13px) rotate(315deg);
}

.preload .openNav_btn_ic,
.preload .openNav_btn_ic span,
.preload .openNav_btn_ic span:before,
.preload .openNav_btn_ic span:after {
  -webkit-transition:none !important;
  -moz-transition:none !important;
  -ms-transition:none !important;
  -o-transition:none !important;
  transition:none !important;
}

#openNav_btn .text {
    display: inline;
    position: absolute;
    left: 0;
    bottom: 14px;
    width: 100%;
    height: 1em;
    text-align: center;
    font-size: 15px;
    margin: 0;
    padding: 0;
}

@media print {
  #openNav_btn { display:none !important; }
}


/*----------------------------------------------------------------------------------------------------

  3.  contents
  
----------------------------------------------------------------------------------------------------*/

.contents {
    margin-top: 159px;
    min-height: calc(100vh - 200px);
}

.ctBlock {
    width:1100px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
}

@media screen and (max-width: 1180px) {
    .ctBlock {
        width:calc(100% - 80px);
        margin-left:40px;
        margin-right:40px;
    }
}
@media screen and (max-width:1100px) {
    .contents { margin-top: 193px; }
}
@media screen and (max-width:810px) {
    .contents { margin-top: 140px; }
}
@media screen and (max-width:700px) {
    .contents { margin-top: 170px; }
}


/*-----------------------------------------------------------------------------------
  column
-----------------------------------------------------------------------------------*/

.column {
    display: flex;
    justify-content: space-between;
    padding: 60px 0 100px;
}

.column .clm-main {
    width: calc(100% - 360px);
}

.column .clm-side {
    width: 300px;
}

@media screen and (max-width:1000px) {
    .column {
        display: block;
    }

    .column .clm-main {
        width: 100%;
        margin-bottom: 80px;
    }

    .column .clm-side {
        width: 100%;
    }
}

/*-----------------------------------------------------------------------------------
  subvisual
-----------------------------------------------------------------------------------*/

.subvisual {
    width: 100%;
    background-color: #edf2f4;
    /*
    background-color: #ffac81;
    background-image: -webkit-linear-gradient(bottom right, #ffac81 0%, #ff928b 74%);
    background-image: -o-linear-gradient(bottom right, #ffac81 0%, #ff928b 74%);
    background-image: linear-gradient(to top left, #ffac81 0%, #ff928b 74%);
    */
}
.subvisual .ctBlock {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 200%;
    padding: 1em 0;
}
.subvisual h1 {
    color: #2b2d42;
    letter-spacing: .2ex;
}
.subvisual h1 span {
    display: block;
    font-size: 50%;
    font-weight: normal;
}


/*-----------------------------------------------------------------------------------
  パンくず
-----------------------------------------------------------------------------------*/

.pan {
    width: 100%;
    max-width: 1100px;
    margin:20px auto 60px;
    text-align:left;
    font-size:87.5%;
    box-sizing: border-box;
}
.pan li {
    display:inline-block;
    position:relative;
}
.pan li:before {
    content:"/";
    display:inline-block;
    padding:0 .5em;
}
.pan li:first-child { padding-left:0; }
.pan li:first-child:before { display:none; }

@media screen and (max-width:1180px) {
    .pan {
        width: calc(100% - 80px);
        margin: 20px 40px 60px;
    }
}


/*-----------------------------------------------------------------------------------
  subject
-----------------------------------------------------------------------------------*/

.subject {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 100px;
    padding: 15px 15px 15px 0;
    box-sizing: border-box;
    background-color: #edf2f4;
    margin-bottom: 30px;
}
.subject::before,
.subject::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background: url("../image/top/subject_dot.png");
}
.subject::before { top: 0; }
.subject::after { bottom: 0; }

.subject .icon {
    width: 70px;
    height: 70px;
    padding: 15px;
    line-height: 1;
    box-sizing: border-box;
    background-color: #ef233c;
    margin-left: -15px;
    margin-right: 24px;
}
.subject .icon img {
    width: 39px;
}

.subject h2 {
    color: #2b2d42;
    font-size: 212.5%;
    line-height: 1.3;
}
.subject h2 span {
    display: block;
    color: #8d99ae;
    font-size: 50%;
}
.subject h2 span.comment {
    color: #2b2d42;
}

@media screen and (max-width:700px) {
}


/*-----------------------------------------------------------------------------------
  btn
-----------------------------------------------------------------------------------*/

.btn {
  width: 220px;
  height: 50px;
  box-sizing: border-box;
  border: 2px solid #0ea2df;
  border-radius: 25px;
  background-color: #fff;
  color: #0ea2df;
  line-height: 46px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s all;
  position: relative;
}
.btn:hover {
  background-color: #F0FAFF;
}
.btn i {
  position: absolute;
  top: 16px;
  right: 16px;
  transition: 0.3s all;
}
.btn:hover i {
  right: 12px;
}

@media screen and (max-width:640px) {
  .btn {
    width: 280px;
  }
  .btn i {
    right: 18px;
    top: 14px;
  }
}


/*----------------------------------------------------------------------------------------------------

  4. footer
  
----------------------------------------------------------------------------------------------------*/

footer {
    width: 100%;
    background-color: #2b2d42;
}

footer .ctBlock {
    padding: 60px 0;
    color: #fff;
    position: relative;
}

footer .site-copy {
    margin-bottom: 1em;
}

footer .logo {
    width: 260px;
    margin-bottom: 1em;
}

footer .shopinfo {
    font-weight: bold;
}
footer .shopinfo .opentime {
    font-size: 93.8%;
}
footer .shopinfo .tel {
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: inherit;
    text-decoration: none;
}
footer .shopinfo .tel img {
    width: 30px;
    margin-right: 0.25em;
}

footer .copyright {
    padding: 2em 0;
    background-color: #fff;
    font-size: 93.8%;
    text-align: center;
}

footer .page-top {
    position: absolute;
    top: 60px;
    right: 0;
    width: 100px;
    transition: .2s;
}

@media screen and (max-width:740px) {
    footer .page-top {
        top: 100px;
    }
}
@media screen and (max-width:740px) {
    footer .shopinfo .tel {
        width: 330px;
    }
    footer .page-top {
        top: 140px;
    }
}



/*----------------------------------------------------------------------------------------------------

  99. parts
  
----------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
  table
-----------------------------------------------------------------------------------*/

.l-tbl01 {
  width:100%;
  border-collapse:collapse;
  border:2px solid #bbbfc5;
}

.l-tbl01 th {
  font-weight:normal;
  text-align:center;
  background-color:#eff0f1;
  white-space:nowrap;
}

.l-tbl01 td {
  text-align:left;
  background-color:#fff;
}

.l-tbl01 th,
.l-tbl01 td {
  padding:1em;
  border:1px solid #c9cdd1;
  vertical-align:top;
}


/*-----------------------------------------------------------------------------------
  list
-----------------------------------------------------------------------------------*/

.l-listNone { list-style:none; }
ul.l-listIn { margin-left:1.2em; }
ol.l-listIn { margin-left:1.5em; }

.l-listType-K {
  counter-reset:number;
  list-style:none;
  padding-left:0.25em;
}

.l-listType-K > li:before {
  counter-increment:number;
  content:"("counter(number)")";
  margin-left:-2em;
  margin-right:0.5em;
}

@media screen and (max-width: 640px) {

ul.l-listIn li {
	float: none;
	width: 100% !important;
}
}