@charset "utf-8";

/**
 *
 * global: サイト共通
 *
 */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body { line-height:1;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block;}
nav ul { list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none;}
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
/* change colours to suit your needs */
ins { background-color:#ff9; color:#000; text-decoration:none;}
/* change colours to suit your needs */
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}
ul {list-style:none; overflow: hidden;}
ol { list-style-type: none;}
img { width: 100%; max-width: 100%; height: auto; line-height: 0;}
br { line-height: inherit;}
button{
 background-color: transparent !important;
 border: none !important;
 cursor: pointer !important;
 outline: none !important;
 padding: 0 !important;
 appearance: none !important;
}

/* change border colour to suit your needs */
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select { vertical-align:middle;}

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

::selection { color:#1d1d1d; background:#E0D8BF; text-shadow:none; opacity:1;}
::-moz-selection { color:#1d1d1d; background:#E0D8BF; text-shadow:none; opacity:1;}

/*--------------------------------------------------------------------------
 html
---------------------------------------------------------------------------*/
html {
 font-size: 62.5%;
 overflow-x: hidden;
 -ms-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
}

/*--------------------------------------------------------------------------
 body
---------------------------------------------------------------------------*/
body {
 font-family: 'Noto Sans', "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
 font-size:14px;
 font-size: 1.4rem;
 line-height: 1.8;
 color: #111111;
 -webkit-text-size-adjust:100%;
 letter-spacing: 0.1em;
 overflow: hidden;
}

/* @SP */
@media all and (max-width: 768px){
 body {
  min-width: 320px;
  font-size: 12px;
  font-size: 1.2rem;
 }
}

.sp { display: none;}

@media all and (max-width: 1200px){
 .modal-video-close-btn {
  width: 30px !important;
  height: 30px !important;
  right: 15px !important;
 }
}

/*----------------------------------------------------------------------
 a
----------------------------------------------------------------------*/
a,a:link,a:visited,a:focus,a:active {
 color: #1d1d1d;
 outline:none;
 text-decoration: none;
}
a {
 -webkit-transition:  all 0.4s;
 -moz-transition:  all 0.4s;
 -o-transition:  all 0.4s;
 transition:  all 0.4s;
}

/*--------------------------------------------------------------------------
 clearfix
---------------------------------------------------------------------------*/
.cf:before, .cf:after { content: " "; display: table;}
.cf:after { clear: both;}
.cf { *zoom: 1;}

/*--------------------------------------------------------------------------
 width
---------------------------------------------------------------------------*/
#content {}
#content .inner_xl {
 max-width: 1560px;
 margin: 0 auto;
}
#content .inner_m {
 max-width: 1400px;
 margin: 0 auto;
}
#content .inner_m {
 max-width: 1200px;
 margin: 0 auto;
}

/*--------------------------------------------------------------------------
 Aimation
---------------------------------------------------------------------------*/
.fade-in {
 opacity: 0;
}
.in {
 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
}

@-webkit-keyframes fadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}

@keyframes fadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}

.fade-up {
 opacity: 0;
 transform: translate(0,40px);
 -webkit-transform: translate(0,40px);
}
.up {
 -webkit-animation-name: fadeUp;
 animation-name: fadeUp;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
}

@-webkit-keyframes fadeUp {
 from {
  opacity: 0;
  transform: translate(0,40px);
  -webkit-transform: translate(0,40px);
 }
 to {
  opacity: 1;
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
 }
}

@keyframes fadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}



.fade-left {
 transition: all 1.2s;
  -o-transition: all 1.2s; /* opera */
  -moz-transition: all 1.2s; /* firefox */
  -webkit-transition: all 1.2s; /* chrome, safari */
  -ms-transition: all 1.2s; /* ie */
 opacity: 0;
 transform: translate(-40px,0);
 -webkit-transform: translate(-40px,0);
 transition-delay: 0.1s;
}
.left {
 opacity: 1.0;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}
.fade-right {
 transition: all 1.2s;
  -o-transition: all 1.2s; /* opera */
  -moz-transition: all 1.2s; /* firefox */
  -webkit-transition: all 1.2s; /* chrome, safari */
  -ms-transition: all 1.2s; /* ie */
 opacity: 0;
 transform: translate(40px,0);
 -webkit-transform: translate(40px,0);
 transition-delay: 0.1s;
}
.right {
 opacity: 1.0;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}
.mask-pht { position: relative;}
.mask-txt::after {
 content: "";
 width: 100%;
 height: 100%;
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 background: #FFF;
}
.is_visible.mask-txt::after {
 background: #FFF;
 animation-name: mask-txt;
 animation-delay: 0.75s;
 animation-duration: 0.75s;
 animation-fill-mode: forwards;
 animation-timing-function: ease-out;
}
@keyframes mask-txt {
 0% {
  width: 100%;
 }
 100% {
  width: 0;
 }
}
.mask-pht {
 position: relative;
}
.mask-pht::after {
 content: "";
 width: 0;
 height: 100%;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 background: #ffe5e0;
}
.is_visible.mask-pht::after {
 animation-name: mask-pht;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
}
@keyframes mask-pht {
 0% {
  width: 0;
  left: 0;
 }
 50% {
  width: 100%;
  left: 0;
 }
 55% {
  width: 100%;
  left: auto;
  right: 0;
 }
 100% {
  width: 0;
  left: auto;
  right: 0;
 }
}
.mask-pht { overflow: hidden; }
.mask-pht figure { line-height: 0;}
.mask-pht img { opacity: 0;}
.is_visible.mask-pht img {
 animation-name: delay;
 animation-delay: 0.75s;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 animation-timing-function: ease-out;
}
@keyframes delay {
 0% {
  opacity: 0;
  transform:scaleX(1)scaleY(1);
 }
 20% {
  opacity: 0;
  transform:scaleX(1)scaleY(1);
 }
 100% {
  opacity: 1;
  transform:scaleX(1.02)scaleY(1.02);
 }
}

.zoom  {
 display: block;
 -webkit-transition: .4s ease-out;
 -moz-transition: .4s ease-out;
 transition: .4s ease-out;
}
a:hover .zoom { transform:scaleX(1.05)scaleY(1.05);}

@media screen and (max-width: 920px) {
 .fade-left,
 .fade-right {
  transition: all 1.2s;
   -o-transition: all 1.2s; /* opera */
   -moz-transition: all 1.2s; /* firefox */
   -webkit-transition: all 1.2s; /* chrome, safari */
   -ms-transition: all 1.2s; /* ie */
  opacity: 0;
  transform: translate(0,40px);
  -webkit-transform: translate(0,40px);
 }
 .left,
 .right {
  opacity: 1.0;
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
 }
}

/*--------------------------------------------------------------------------
 title
---------------------------------------------------------------------------*/
.en-tit {
 margin-bottom: 20px;
 line-height: 1;
 font-family: 'Noto Sans', sans-serif;
 font-size: 40px;
 font-weight: bold;

}
.en-tit02 {
 margin-bottom: 20px;
 line-height: 1;
 font-family: 'Noto Sans', sans-serif;
 font-size: 50px;
 font-weight: bold;
 color: #fff;
 text-shadow:
    1px 0 0 #b62224,
    0 1px 0 #b62224,
    -1px 0 0 #b62224,
    0 -1px 0 #b62224

}
@media screen and (max-width: 1200px) {
 .en-tit {
  margin-bottom: 25px;
  font-size: 20px;
 }
}
@media screen and (max-width: 640px) {
 .en-tit {
  margin-bottom: 15px;
  font-size: 14px;
 }
}

/*--------------------------------------------------------------------------
 btn
---------------------------------------------------------------------------*/
.basic-btn { width: 480px;}
.basic-btn a {
 display: block;
 text-align: center;
 line-height: 80px;
 color: #000;
 font-family: 'Noto Sans', sans-serif;
 font-size: 16px;
 font-weight: bold;
 background: #fff84c;
 -webkit-border-radius: 40px;
         border-radius: 40px;
 position: relative;
}
.basic-btn a span {
 width: 30px;
 font-size: 30px;
 position: absolute;
 right: 25px;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}
.basic-btn a:hover {
 color: #FFF;
 background: #00a021;
}
.remodal .close {
 width: 90%;
 max-width: 380px;
 height: 80px;
 margin: 0 auto;
 display: block;
 line-height: 80px;
 color: #FFF;
 font-size: 16px;
 background-color: #333 !important;
 -webkit-border-radius: 40px;
         border-radius: 40px;
 position: relative;
 -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
     -ms-transition: all 0.4s;
      -o-transition: all 0.4s;
         transition: all 0.4s;
}
.remodal .close:hover { background-color: #000 !important;}
.remodal .close span {
 display: block;
 color: #FFF;
}
.remodal .close .icon {
  color: #FFF;
  position: absolute;
  margin-top: -12px;
  margin-left: 0;
  width: 24px;
  height: 24px;
  top: 50%;
  right: 30px;
}
.remodal .close .icon::before {
  content: '';
  position: absolute;
  top: 10px;
  width: 18px;
  height: 1px;
  background-color: #FFF;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.remodal .close .icon::after {
  content: '';
  position: absolute;
  top: 10px;
  width: 18px;
  height: 1px;
  background-color: #FFF;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}



@media screen and (max-width: 1200px) {
 .basic-btn a {
  line-height: 66px;
  font-size: 14px;
  -webkit-border-radius: 33px;
          border-radius: 33px;
 }
 .basic-btn a span {
  width: 24px;
  font-size: 24px;
  right: 22px;
 }
 .remodal .close {
  height: 66px;
  line-height: 66px;
  color: #FFF;
  font-size: 14px;
  -webkit-border-radius: 33px;
          border-radius: 33px;
 }
}
@media screen and (max-width: 640px) {
 .basic-btn {
  width: 90%;
  max-width: 320px;
 }
 .basic-btn a {
  line-height: 60px;
  font-size: 12px;
  -webkit-border-radius: 30px;
          border-radius: 30px;
 }
 .basic-btn a span { right: 20px;}
 .remodal .close {
  width: 90%;
  max-width: 300px;
  height: 60px;
  line-height: 60px;
  color: #FFF;
  font-size: 14px;
  -webkit-border-radius: 30px;
          border-radius: 30px;
 }
}