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

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2018/09/25
* Last update : 2018/09/26
* Made by     : Murata Hiroyuki
* Updated by  : Murata Hiroyuki
*
**********************************************************************/


/*************************************************************************************************************************
* reset
*************************************************************************************************************************/
html{ height: 100%; overflow-y: scroll;}
body{ height: 100%; margin: 0; padding: 0; font-family: 'Noto Sans JP', sans-serif; text-align: justify; text-justify: inter-ideograph; -webkit-text-size-adjust: 100%;}
img{ width: 100%; max-width: 100%; height: auto; border: 0; vertical-align: bottom;}
svg{ vertical-align: bottom;}
form{ margin: 0; padding: 0;}
p{ margin: 0; padding: 0;}
a, a:hover{ text-decoration: none; outline: none;}
h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; font-size: 0; line-height: 0;}
ul, ol, dl, dt, dd{ margin: 0; padding: 0;}
li{ margin: 0; padding: 0; list-style: none;}
table{ border: 0; border-collapse: collapse; border-spacing: 0;}
caption, th{ text-align: left;}
header, nav, main, article, aside, section, footer{ display: block;}
*{ box-sizing: border-box;}
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}



/*************************************************************************************************************************
* html
*************************************************************************************************************************/
html{ font-weight: 400; font-size: 14px; color: #333;}
body{ padding: 113px 0 0;}
.sp-only{ display: block;}

@media print, screen and (min-width:681px){
  html{ font-size: 15px;}
  body{ min-width: 1000px; padding-top: 81px;}
	.sp-only{ display: none;}
}



/* header
**********************************************************************/
header{ background: rgba(255,255,255,1); width: 100%; height: 113px; position: fixed; top: 0; left: 0; z-index: 100; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic","sans-serif"}
header .logo{ display: block; width: 100px; position: absolute; top: 12px; left: 10px;}
header h1{ font-size: 12px; color: #D50F21; line-height: 1.5; position: absolute; top: 8px; left: 130px;}
header h1 strong{ font-size: 13px; font-weight: bold;}
header .shopinfo{ width: 100%; height: 62px; padding: 16px 0 0 8px; background: #D30716; position: absolute; top: 51px; left: 0; overflow: hidden;}
header .shopinfo strong{ display: block; width: 77px; height: 15px; background: url(../img/h_shop_title.svg) no-repeat left top/cover; overflow: hidden; text-indent: 100%; white-space: nowrap; position: absolute; top: 5px; left: -5px;}
header .shopinfo p{ font-size: 12px; color: #FFFFFF; line-height: 1.0;}
header .shopinfo p span{ position: relative; bottom: 2px;  display: inline-block; margin: 0 0 0 8px; font: 700 25px/1 'Roboto',sans-serif; color: #FF0; font-style: italic; letter-spacing: 1px; transform: translateY(2px); text-shadow: 2px 2px 0px #600505; }
/*
header .shopinfo p span{ display: inline-block; margin: 0 0 0 10px; font: 700 25px/1 "Roboto",sans-serif; color: #600505; font-style: italic; letter-spacing: 1px; position: relative; transform: translateY(2px);}
header .shopinfo p span::before{ content: "561"; font: 700 25px/1 "Roboto",sans-serif; color: #FFFF00; font-style: italic; letter-spacing: 1px; position: absolute; top: -2px; left: -2px;}
*/
header .shopinfo ul{ display: flex; width: 186px; position: absolute; top: 0; right: 0;}
header .shopinfo ul li{ width: 62px; position: relative;}
header .shopinfo ul li a{ display: block; width: 100%; height: 62px; text-indent: 100%; white-space: nowrap; overflow: hidden;}
header .shopinfo ul li:nth-child(1) a{ background: url(../img/h_tel_sp.svg) no-repeat top left/cover;}
header .shopinfo ul li:nth-child(2) a{ background: url(../img/h_request_sp.svg) no-repeat top left/cover;}
header .shopinfo ul li:nth-child(3) a{ background: url(../img/h_menu_sp.svg) no-repeat top left/cover;}
header .shopinfo ul li a.open{ background: url(../img/h_menu_close_sp.svg) no-repeat top left/cover;}
header .shopinfo ul li::before{ content: ""; background: #fff; width: 1px; height: 46px; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
header .shopinfo ul li:nth-child(3)::before{ display: none;}
header .shopinfo > span{ font-size: 10px; color: rgba(255,255,255,.8); position: absolute; top: 4px; left: 80px;}

header .sitemenu{ width: 100%; max-height: 0; background: #ffe100; position: absolute; top: 113px; left: 0; overflow: hidden; transition: max-height 0.5s;}
header .sitemenu.open{ max-height: 300px;}
header .sitemenu ul{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 auto;}
header .sitemenu ul li{ width: 100%;}
header .sitemenu ul li a{ display: block; width: 100%; height: 60px; padding: 19px 0 0 0; font-family: 'Noto Sans JP', sans-serif; text-align: center !important; color: #333; font-weight: 700; border-bottom: 1px solid #fff; position: relative;}
header .sitemenu ul li:last-child a{ border-bottom: none;}
header .sitemenu ul li a::after{ content: ""; background: url(../img/icon_arrow01.svg) no-repeat center/contain; width: 8px; height: 11px; position: absolute; top: 24px; right: 13px;}


@media print, screen and (min-width:471px){
  header .shopinfo p{ display: inline;}
  header .shopinfo > span{ position: absolute; top: 40px; left: 9px;}
}
@media print, screen and (min-width:531px){
  header .shopinfo p{ font-size: 13px; letter-spacing: 1px;}
}
@media print, screen and (min-width:571px){
  header .shopinfo p{ font-size: 15px;}
  header .shopinfo p span{ font-size: 28px;}
  header .shopinfo p span::before{ font-size: 28px;}
  header .shopinfo > span{ top: 42px;}
}
@media print, screen and (min-width:681px){
  header h1{ font-size: 13px; top: 20px; left: 210px;}
  header h1 strong{ font-size: 15px;}
  header .shopinfo{ width: 370px; height: 81px; padding: 14px 0 0 15px; top: 0; left: auto; right: 0;}
  header .shopinfo strong{ width: 92px; height: 18px; top: 8px; left: -7px;}
  header .shopinfo p{ display: block; font-size: 13px; letter-spacing: 0.5;}
  header .shopinfo p span{ font-size: 35px;}
  header .shopinfo p span::before{ font-size: 35px;}
  header .shopinfo > span{ top: 63px; left: 15px;}
  header .shopinfo ul{ width: 182px;}
  header .shopinfo ul li{ width: 91px; position: relative;}
  header .shopinfo ul li a{ display: block; width: 100%; height: 81px; text-indent: 100%; white-space: nowrap; overflow: hidden;}
  header .shopinfo ul li:nth-child(1) a{ background: url(../img/h_tel_pc.svg) no-repeat top left/cover;}
  header .shopinfo ul li:nth-child(2) a{ background: url(../img/h_request_pc.svg) no-repeat top left/cover;}
  header .shopinfo ul li:nth-child(3){ display: none;}
  header .shopinfo ul li:nth-child(1)::before{ height: 65px;}
  header .shopinfo ul li:nth-child(2)::before{ display: none;}
  
  header .sitemenu{ display: none;}
}
@media print, screen and (min-width:1061px){
  header .shopinfo{ width: 400px; padding: 14px 0 0 20px;}
  header .shopinfo strong{ left: 0px;}
  header .shopinfo > span{ left: 20px;}
}

@media print, screen and (min-width:681px){
	header{ height: 81px;}
	header .logo{ width: 153px; left: 33px;}
	header > a{ display: none;}
}
@media print, screen and (min-width:1050px){
	header{ min-width: 1050px; }
}


/*************************************************************************************************************************
* main
*************************************************************************************************************************/
main{ padding: 0;}
main h2{ padding: 50px 0; background: url("../img/pagetitle_bg.jpg") no-repeat center center/cover; font-family: 'Noto Sans JP', sans-serif; font-size: 18px; text-align: center; color: #fff; font-weight: 700; position: relative;}
@media print, screen and (min-width:681px){
  main h2{ padding: 80px 0 120px 0; font-size: 26px;}
}


/*************************************************************************************************************************
* mainmenu
*************************************************************************************************************************/
.mainmenu{ display: none;}
@media print, screen and (min-width:681px){
	.mainmenu{ display: block;}
	.mainmenu{ margin: -38px 0 60px 0;}
	.mainmenu__list{ display: flex; width: 950px; height: 76px; margin: 0 auto; background: #ffdc01; border-radius: 38px; box-shadow: 0px 0px 15px -5px #777777; position: relative; z-index: 10; overflow: hidden;}
	.mainmenu__list-item{ display: block; width: calc(100%/5); height: 76px;}
	.mainmenu__list-item-link{ display: flex; justify-content: center; align-items: center; width: 100%; height: 76px; padding: 0 0 3px 0; font-size: 15px; font-weight: 700; color: #333; line-height: 1; position: relative;}
	.mainmenu__list-item-link::after{ content: ""; width: 1px; height: 45px; background: #d6af09; position: absolute; right: 0; top: 14px;}
	.mainmenu__list-item:last-child .mainmenu__list-item-link{ padding-right: 10px;}
	.mainmenu__list-item:last-child .mainmenu__list-item-link::after{ display: none;}
	.mainmenu__list-item-link::before{ content: ""; width: 1px; height: 45px; background: #fff3b6; position: absolute; left: 0; top: 14px;}
	.mainmenu__list-item:first-child .mainmenu__list-item-link{ padding-left: 10px;}
	.mainmenu__list-item:first-child .mainmenu__list-item-link::before{ display: none;}
}

/*************************************************************************************************************************
* interview
*************************************************************************************************************************/
.interview__title{ display: block; width: 280px; height: 75px; margin: 17px auto 0 auto; padding: 0; font-size: 20px; font-weight: 700; color: #333; line-height: 1.3; text-align: center; position: relative;}
.interview__title span{ display: block; margin: 8px 0 0 0; font-size: 14px; font-weight: 300;}
.interview__title::before{ display: block; content: ""; width: 145px; height: 42px; background: url(../../img/interview_icon.svg) no-repeat left top/cover; position: absolute; top: -35px; left: -25px;}
.interview__box.top{ padding: 0 0 30px 0; background: url("../../img/interview_bg.jpg") no-repeat center 200px/cover; overflow: hidden;}
.interview__list{ margin: 0 0 30px 0;}
.interview__list-item{ width: 300px; margin: 0 25px 0 0; background: #fff; box-shadow: 7px 7px 0px 0px rgba(0,0,0,.2);}
.interview__list-item-imgbox{ width: 100%; height: 200px; position: relative; z-index: 1;}
.interview__list-item-imgbox__no{ display: flex; align-items: center; font-family: 'Roboto', sans-serif; font-size: 29px; font-weight: 400; font-style: italic; line-height: 1; color: #fff; position: absolute; top: 10px; left: 10px; z-index: 4;}
.interview__list-item-imgbox__no span{ margin: 0 3px 0 0; font-size: 21px; font-weight: 300;}
.interview__list-item-imgbox__title{ width: 100%; font-size: 18px; font-weight: 700; color: #348A86; line-height: 2.3; text-align: center; position: absolute; top: 50%; left: 50%; z-index: 4; transform: translate(-50%,-50%);}
.interview__list-item-imgbox__title span{ padding: 0px 4px 2px 4px; background: #FFDC01; box-shadow: 3px 3px 0px 0px #348A86;}
.interview__list-item-imgbox::after{ content: ""; width: 100%; height: 200px; background: rgba(0,0,0,.4); position: absolute; z-index: 3;}
.interview__list-item-imgbox__img{ width: 100%; height: 200px; position: absolute; z-index: 2;}
.interview__list-item-textbox{ width: 100%; height: 120px; padding: 20px 18px;}
.interview__list-item-textbox__company{ margin: 0 0 10px 0; font-size: 14px; font-weight: 700; line-height: 1.2; color: #333;}
.interview__list-item-textbox__company span{ display: block; margin: 5px 0 0 0; font-size: 12px; font-weight: 300;}
.interview__list-item-textbox__name{ width: 100%; padding: 10px 0 0 0; border-top: 1px solid #ccc; font-size: 13px; font-weight: 700; line-height: 1.2; color: #333;}
.interview__box-btn{ display: flex; align-items: center; justify-content: center; width: 300px; height: 50px; margin: 0 auto; padding: 0 0 2px 0; background: #fff; font-size: 14px; font-weight: 700; color: #333; line-height: 1;}
.interview__box-btn::before{ content: ""; width: 0; height: 0; margin: 1px 7px 0 0; border-style: solid; border-width: 4.5px 0 4.5px 6px; border-color: transparent transparent transparent #348A86;}
@media print, screen and (min-width:681px){
	.interview__box.top{ padding: 0 0 60px 0; overflow: visible;}
  .interview__title{ width: 300px; height: 65px; margin: 0 auto 0 auto; font-size: 25px;}
  .interview__title::before{ width: 178px; height: 62px; top: -52px; left: -72px;}
  .interview__title span{ margin: 10px 0 0 0; font-size: 15px;}
	.interview__box{ margin: 50px 0 0 0; padding: 0 0 60px 0;}
	.interview__list{ display: flex; justify-content: center; margin: 0 0 60px 0;}
	.interview__list-item{ transition: transform .5s;}
	.interview__list-item:hover{ transform: translateY(-10px);}
	.interview__list-item:last-child{ margin: 0;}
	.interview__box-btn{ width: 410px; height: 70px; font-size: 17px; transition: background .5s;}
	.interview__box-btn::before{ margin: 1px 10px 0 0;}
	.interview__box-btn:hover{ background: #ffdc01;}
}

  /* slick */
.slick-list{ overflow: visible;}
.slick-prev,
.slick-next{ width: 40px; height: 50px; background: #348A86; z-index: 2;}
.slick-prev{ left: 0;}
.slick-next{ right: 0;}
.slick-prev:hover,
.slick-next:hover{ }
.slick-prev::before{ content: ''; width: 15px; height: 15px; border-bottom: solid 1px #fff; border-left: solid 1px #fff; position: absolute; top: 50%; left: calc(50% + 5px); transform: translate(-50%,-50%) rotate(45deg);}
.slick-next::before{ content: ''; width: 15px; height: 15px; border-top: solid 1px #fff; border-right: solid 1px #fff; position: absolute; top: 50%; left: calc(50% - 5px); transform: translate(-50%,-50%) rotate(45deg);}
  
.slick-dotted.slick-slider{ margin-bottom: 0;}
.slick-dots{ bottom: -27px;}
.slick-dots li{ margin: 0 3px;}
.slick-dots li button{ position: relative;}
.slick-dots li button:before{ content: ""; background: rgba(0,0,0,.3); width: 8px; height: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; transition: background .3s linear;}
.slick-dots li.slick-active button:before{ background: #dd0716;}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before{ background: #dd0716;}
@media print, screen and (min-width:681px){
  .slick-dots{ bottom: -35px;}
}


/*************************************************************************************************************************
* 3min
*************************************************************************************************************************/
.three-min__box{ display: block; box-shadow: 0px 0px 13px -3px rgba(0,0,0,0.5); position: relative;}
.three-min__img{ position: relative;}
.three-min__img::before{ display: block; content: ""; width: 70px; height: 70px; background: url("../../3min/img/icon_start.svg") no-repeat center center/contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.three-min__part{ width: 65px; height: 19px; padding: 0 0 0 10px; background: #CF2C28; font-size: 15px; font-weight: 700; font-style: italic; line-height: 1; color: #fff; position: absolute; left: 0; bottom: 53px; z-index: 10;}
.three-min__part::before{ display: block; content: ""; width: 10px; height: 19px; background: url("../../3min/img/part_right.svg") no-repeat center center/cover; position: absolute; top: 0; right: -10px;}
.three-min__title{ width: 100%; height: 62px; padding: 10px 0 0 0; background: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; color: #CF2C28; text-align: center;}


/*************************************************************************************************************************
* facebook
*************************************************************************************************************************/
.facebook{ width: 100%; padding: 30px 15px;}
@media print, screen and (min-width:681px){
	.facebook{ padding: 60px 0;}
	.facebook a{ display: block; width: 950px; margin: 0 auto;}
}

/*************************************************************************************************************************
* request
*************************************************************************************************************************
.request__box{ width: 100%; padding: 30px 15px; background: #f8f8f0; border-top: 1px solid #dd0716;}
.request__box-link{ display: flex; justify-content: center; align-items: center; width: 100%; margin: 0 auto; padding: 21px 0 20px; background: #FFF; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 700; color: #dd0716; text-align: center; border: 2px solid #dd0716; border-radius: 6px; box-shadow: 0 4px 0 0 #dd0716; transition: all 0.3s;}
.request__box-link:hover{ background: #dd0716; color: #FFF; box-shadow: 0 0 0 0 #dd0716;; transform: translateY(4px);}
.request__box-link::before{ display: inline-block; content: ""; width: 18px; height: 23px; margin: 0 10px 0 0; background: url("../img/f_request_red.svg") no-repeat left top/cover;}
.request__box-link:hover::before{ background: url("../img/f_request_white.svg") no-repeat left top/cover;}
@media print, screen and (min-width:681px){
	.request__box{ padding: 50px 0;}
	.request__box-link{ width: 450px; font-size: 19px;}
}
*/
.request__box{ margin: 30px 15px; padding: 20px 0; border: 1px solid #dd0716; font-family: 'Noto Sans JP'; text-align: center; border-radius: 6px;}
.request__box-link{ display: block; width: 180px; height: 40px; margin: 0 auto 10px auto; padding: 6px 0 0 0; background: #dd0716; font-size: 16px; font-weight: 700; color: #fff; text-align: center; border-radius: 20px; transition: all .5s;}
.request__box-text{ font-size: 16px; font-weight: 700; color: #000;}
.request__box-text__tel{ display: block; font-size: 25px; color: #000;}
.request__box-text span{ display: block; font-size: 14px; font-weight: 300;}
@media print, screen and (min-width:681px){
	.request__box{ margin: 50px 40px; padding: 30px 0; letter-spacing: 2px;}
	.request__box-link{ width: 200px; height: 50px; padding: 10px 0 0 0; font-size: 18px; border-radius: 25px;}
	.request__box-link:hover{ background: #ffdc01; color: #dd0716;}
	.request__box-text__tel{ display: inline-block; font-size: 34px; margin: 0 15px; transform: translateY(5px);}
	.request__box-text span{ display: inline-block;}
}


/*************************************************************************************************************************
* footer
*************************************************************************************************************************/
footer{ padding: 20px 15px 15px; background: #fff; border-top: 5px solid #dd0716; position: relative; z-index: 100;}
footer > a.pagetop{ display: block; background: rgba(255,255,255,.8); width: 38px; height: 38px; position: fixed; bottom: 15px; right: 15px; border: 3px solid #dd0716; border-radius: 50%; overflow: hidden; text-indent: 100%; white-space: nowrap;}
footer > a.pagetop::before{ content: ""; background: url(../img/btn_pagetop.svg) no-repeat 0 0/contain; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: transform .3s;}
footer > a.pagetop:hover::before{ transform: translateY(-3px);}
footer > a.logo{ width: 150px;}
footer > a.logo img{ width: 150px;}
footer div{ margin: 15px 0 0;}
footer div dl{ font-size: 13px; line-height: 1.5;}
footer div dl dd a{ color: #333;}
footer div p{ margin: 20px 0 0; font-size: 10px; line-height: 1; color: #808080;}
footer div p span{ display: none;}

@media print, screen and (min-width:681px){
  footer{ display: flex; align-items: flex-end; min-width: 1000px; padding: 12px 30px 22px;}
  footer > a.pagetop{ bottom: 25px; right: 30px;}
  footer > img{ width: 153px;}
  footer div{ margin: 0 0 0 20px;}
  footer div dl{ display: flex; flex-direction: column; font-size: 14px; line-height: 1.3;}
  footer div dl dt{ margin: 0 1em 0 0;}
  footer div dl dd br{ display: none;}
  footer div p{ margin-top: 10px;}
  footer div p span{ display: inline;}
}

@media print, screen and (min-width:890px){
  footer div dl{ flex-direction: row; line-height: 1;}
}



.mfp-bg{ background: rgba(0,0,0,.7)!important;}
.mfp-fade{ background: none;}
.mfp-container{ padding: 0 16px;}
.mfp-iframe-scaler{ height: calc(100vh - 120px);}
.mfp-fade .mfp-iframe-scaler iframe{ background: #fff;}
.mfp-iframe-holder .mfp-content{ height: calc(100%*0.56);}