@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:#E0D8BF; color:#000; text-decoration:none;}
/* change colours to suit your needs */
mark { background-color:#E0D8BF; 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;}
ol { list-style-type: none;}
img { width: 100%; max-width: 100%; height: auto; line-height: 0;}
picture,figure { display: block; line-height: 0;}
br { line-height: inherit;}
span {
 font-size: inherit;
 line-height: inherit;
}

/* 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:#111; background:#E0D8BF; text-shadow:none; opacity:1;}
::-moz-selection { color:#111; background:#E0D8BF; text-shadow:none; opacity:1;}

input, button, textarea, select {
 margin: 0;
 padding: 0;
 background: none;
 border: none;
 border-radius: 0;
 outline: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 letter-spacing: .1em;
 color: #111;
 font-family : inherit;
 font-size: 16px;
 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
         transition: all .3s ease-in-out;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

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

/*--------------------------------------------------------------------------
 body
---------------------------------------------------------------------------*/
body {
 width: 100%;
 min-height: 100%;
 letter-spacing: .1em;
 line-height: 2;
 color: #111;
 font-family: YakuHanJPs_Narrow, "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
 font-size: 16px;
 font-weight: 400;
 -webkit-text-size-adjust: 100%;
 font-feature-settings : "palt";
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 /* overscroll-behavior: none; */
 /* -ms-scroll-chaining: none; */
 -webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
}
.icon {
 letter-spacing: 0;
 line-height: 1;
}

@media all and (max-width: 1200px){
 body { font-size: 14px;}
}

@media all and (max-width: 960px){
 .page-wrap { padding-top: 0;}
}

/* @SP */
@media all and (max-width: 768px){
 body {
  min-width: 375px;
  font-size: 13px;
  -ms-overflow-x: hidden;
      overflow-x: hidden;
  -ms-overflow-y: scroll;
      overflow-y: scroll;
 }
 .nav-open,
 .nav-open body { overflow: hidden;}
.logomark{
  width: 50%;
  margin: 30px 0 0 20px;
 }
  .logomark img{
   width: 100%;
   height: auto;
  }
  
}

/*----------------------------------------------------------------------
 a
----------------------------------------------------------------------*/
a,a:link,a:visited,a:focus,a:active {
 color: #111;
 outline:none;
 text-decoration: none;
}
a {
 cursor: pointer;
 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
         transition: all .3s ease-in-out;
}

/*----------------------------------------------------------------------
 br
----------------------------------------------------------------------*/
br.sp { display: none;}
@media all and (max-width: 768px){
 br.sp { display: inline;}
}

/*--------------------------------------------------------------------------
 animation
---------------------------------------------------------------------------*/
.fade-in { opacity: 0;}
/* ie11 ハック*/
@media all and (-ms-high-contrast:none){
.fade-in {
 opacity: 1;
}
}
.in {
 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;
 animation-duration: 1s;
 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,30px);
 -webkit-transform: translate(0,30px);
}
/* ie11 ハック*/
@media all and (-ms-high-contrast:none){
.fade-up {
 opacity: 1;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}
}
.up {
 -webkit-animation-name: fadeUp;
 animation-name: fadeUp;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
}

.delay01 { animation-delay: 0.5s;}
.delay02 { animation-delay: 1s;}
@media screen and (max-width: 768px) {
 .delay01 { animation-delay: 0s;}
 .delay02 { animation-delay: 0s;}
}

@-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 fadeUp {
 from {
  opacity: 0;
  transform: translate(0,30px);
  -webkit-transform: translate(0,30px);
 }
 to {
  opacity: 1;
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
 }
}

.mask_wrap{
 display: table;
 overflow: hidden;
}
.mask-wrap .mask{
 display: table;
 line-height: 0;
 position: relative;
 left: -100%;
 overflow: hidden;
}
.mask-wrap .mask-bg{
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: #111;
 z-index: 10;
}
.zoom {
 display: block;
 overflow: hidden;
}
.zoom img {
 display: block;
 -webkit-transition: .4s ease-out;
 -moz-transition: .4s ease-out;
 transition: .4s ease-out;
}
a:hover .zoom img {
 opacity: .8;
 transform:scaleX(1.05)scaleY(1.05);
}

/*--------------------------------------------------------------------------
 inner
--------------------------------------------------------------------------*/
.inner-l {
 width: calc(100% - 280px);
 margin-left: 280px;
 margin-right: 0;
 padding-right: 6.0385vw;
}
.inner-m {
 width: calc(100% - 280px);
 margin-left: 280px;
 margin-right: 0;
 padding-right: 6.0385vw;
}
.inner-s {
 width: 87.923vw;
 max-width: 960px;
 margin-left: auto;
 margin-right: auto;
 padding-right: 0;
}
.sec-bg { background: #F0F4F7;}
@media screen and (min-width: 1700px) {
 .inner-l {
  width: 75vw;
  margin-left: 17.7vw;
  margin-right: auto;
  padding-right: 0;
 }
 .inner-m {
  width: 64.58333vw;
  margin-left: auto;
  margin-right: auto;
  padding-right: 0;
 }
}
@media screen and (max-width: 1200px) {
 .inner-l {
  width: calc(100% - 220px);
  margin-left: 220px;
 }
 .inner-m {
  width: calc(100% - 220px);
  margin-left: 220px;
 }
}
@media screen and (max-width: 960px) {
 .inner-l,
 .inner-m {
  width: 87.923vw;
  margin-left: auto;
  margin-right: auto;
  padding-right: 0;
 }
}

/*--------------------------------------------------------------------------
 マージン
---------------------------------------------------------------------------*/
.mTop200 { margin-top: 200px;}
.mTop150 { margin-top: 150px;}
.mTop120 { margin-top: 120px;}
.mTop100 { margin-top: 100px;}
.mTop90 { margin-top: 90px;}
.mTop80 { margin-top: 80px;}
.mTop70 { margin-top: 70px;}
.mTop60 { margin-top: 60px;}
.mTop50 { margin-top: 50px;}
.mTop45 { margin-top: 45px;}
.mTop40 { margin-top: 40px;}
.mTop35 { margin-top: 35px;}
.mTop30 { margin-top: 30px;}
.mTop25 { margin-top: 25px;}
.mTop20 { margin-top: 20px;}
.mTop15 { margin-top: 15px;}
.mTop10 { margin-top: 10px;}
.mt05em { margin-top: 0.5em;}
.mt1em { margin-top: 1em;}
.mt1_5em { margin-top: 1.5em;}
.mt2em { margin-top: 2em;}
.mt3em { margin-top: 3em;}
.mt4em { margin-top: 4em;}

.lh2 { line-height: 2;}

@media screen and (max-width: 1200px) {
 .mTop200 { margin-top: 150px;}
 .mTop150 { margin-top: 120px;}
 .mTop120 { margin-top: 100px;}
 .mTop100 { margin-top: 80px;}
 .mTop90 { margin-top: 70px;}
 .mTop80 { margin-top: 60px;}
 .mTop70 { margin-top: 55px;}
 .mTop60 { margin-top: 45px;}
 .mTop50 { margin-top: 40px;}
 .mTop45 { margin-top: 35px;}
 .mTop40 { margin-top: 30px;}
 .mTop35 { margin-top: 25px;}
 .mTop30 { margin-top: 25px;}
 .mTop25 { margin-top: 20px;}
 .mTop20 { margin-top: 15px;}
 .mTop15 { margin-top: 12px;}
 .mTop10 { margin-top: 8px;}
}
@media screen and (max-width: 768px) {
 .mTop200 { margin-top: 100px;}
 .mTop150 { margin-top: 90px;}
 .mTop120 { margin-top: 70px;}
 .mTop100 { margin-top: 60px;}
 .mTop90 { margin-top: 50px;}
 .mTop80 { margin-top: 40px;}
 .mTop70 { margin-top: 40px;}
 .mTop60 { margin-top: 35px;}
 .mTop50 { margin-top: 30px;}
 .mTop45 { margin-top: 30px;}
 .mTop40 { margin-top: 25px;}
 .mTop35 { margin-top: 20px;}
 .mTop30 { margin-top: 20px;}
 .mTop25 { margin-top: 15px;}
 .mTop20 { margin-top: 12px;}
 .mTop15 { margin-top: 10px;}
}

/*--------------------------------------------------------------------------
 br
---------------------------------------------------------------------------*/
br.sp-only { display: none;}
@media screen and (max-width: 768px) {
 br.sp-only { display: inline;}
 br.sp-none { display: none;}
}

/*--------------------------------------------------------------------------
 header
---------------------------------------------------------------------------*/
#header {
 width: 240px;
 height: 100%;
 position:relative;
 left: 0;
 top: 0;
 z-index: 100;
}
#header .header-wrap {
 height: 100%;
 padding: 30px 30px 15px;
 position: relative;
 overflow: hidden;
}
#header .header-wrap .logo {width: 100%;}
#header .header-wrap .logo a {
 width: 150px;
 line-height: 0;
 display: block;
}
#header .nav-toggle { display: none;}
#header .header-wrap .global-menu {
 margin-top: -58px;
 position: absolute;
 left: 30px;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}
#header .header-wrap .global-menu .nav-list-main {}
#header .header-wrap .global-menu .nav-list-main li {}
#header .header-wrap .global-menu .nav-list-main li a {
 display: block;
 line-height: 2.666;
 font-size: 15px;
 font-weight: 600;
 position: relative;
}
#header .header-wrap .global-menu  li a:hover { color: #326CDB;}
#header .header-wrap .global-menu .nav-list-main li a span { position: relative;}
#header .header-wrap .global-menu .nav-list-main li a span::before {
 content: "";
 width: 6px;
 height: 6px;
 -webkit-border-radius: 50%;
         border-radius: 50%;
 background: #326CDB;
 position: absolute;
 left: -14px;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
 opacity: 0;
 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
         transition: all .3s ease-in-out;
}
#header .header-wrap .global-menu .nav-list-main li a:hover span::before { opacity: 1;}
#header .header-wrap .global-menu .nav-list-sub {
 margin-top: 20px;
 padding-top: 20px;
 position: relative;
}
#header .header-wrap .global-menu .nav-list-sub::before {
 content: "";
 width: 20px;
 height: 1px;
 background: #333;
 position: absolute;
 left: 0;
 top: 0;
}
#header .header-wrap .global-menu .nav-list-sub li {}
#header .header-wrap .global-menu .nav-list-sub li a {
 display: block;
 line-height: 2.666;
 font-size: 13px;
 position: relative;
}
#header .header-wrap .global-menu .btn-insta {
 margin-top: 20px;
 line-height: 1;
}
#header .header-wrap .global-menu .btn-insta a {
 color: #111;
 font-size: 28px;
 line-height: 1;
}
#header .header-wrap .global-menu .btn-insta a:hover  { color: #326CDB;}
#header .header-wrap .header-copy {
 letter-spacing: .1em;
 line-height: 1;
 font-family: din-2014, sans-serif;
 font-size: 12px;
 font-weight: 300;
 position: absolute;
 left: 15px;
 bottom: 176px;
}
#header .header-wrap .btn-contact {
 position: absolute;
 left: 0;
 bottom: 15px;
}
#header .header-wrap .btn-contact a {
 width: 200px;
 padding: 0 17px;
 display: flex;
 -webkit-align-items: center;
         align-items: center;
 line-height: 68px;
 color: #FFF;
 font-weight: 600;
 background: #111;
}
#header .header-wrap .btn-contact a:last-child { margin-top: 8px;}
#header .header-wrap .btn-contact a:hover {
 background: #326CDB;
 color: #FFF;
}
#header .header-wrap .btn-contact .icon {
 margin-right: .75em;
 line-height: 1;
 color: #2CA5F2;
 font-size: 22px;
 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
         transition: all .3s ease-in-out;
}
#header .header-wrap .btn-contact a:hover .icon { color: #FFF;}
#header .header-wrap .btn-contact .txt { font-size: 15px;}

@media screen and (max-width: 1200px) {
 #header {
  width: 240px;
  height: 100%;
 }
 #header .header-wrap { padding: 25px 25px 12px;}
 #header .header-wrap .logo a { width: 120px;}
 #header .header-wrap .header-copy {
  margin-top: 16px;
  font-size: 10px;
  left: 12px;
 }
 #header .header-wrap .global-menu {
  margin-top: -35px;
  left: 25px;
 }
 #header .header-wrap .global-menu .nav-list-main li a { font-size: 13px;}
 #header .header-wrap .global-menu .nav-list-main li a span::before {
  width: 5px;
  height: 5px;
  left: -12px;
 }
 #header .header-wrap .global-menu .nav-list-sub {
  margin-top: 15px;
  padding-top: 15px;
 }
 #header .header-wrap .global-menu .nav-list-sub li a { font-size: 11px;}
 #header .header-wrap .global-menu .btn-insta { margin-top: 15px;}
 #header .header-wrap .global-menu .btn-insta a { font-size: 24px;}
 #header .header-wrap .header-copy {
  font-size: 10px;
  bottom: 143px;
 }
 #header .header-wrap .btn-contact { bottom: 12px;}
 #header .header-wrap .btn-contact a {
  width: 160px;
  padding: 0 13px;
  line-height: 56px;
 }
 #header .header-wrap .btn-contact a:last-child { margin-top: 7px;}
 #header .header-wrap .btn-contact .icon { font-size: 17px;}
 #header .header-wrap .btn-contact .txt { font-size: 13px;}
}
@media screen and (max-width: 960px) {
 #header {
  width: 100%;
  height: auto;
 }
 #header .header-wrap {
  height: auto;
  padding: 0;
 }
 #header .header-wrap .logo { margin: 15px 0 0 15px; }
 #header .header-wrap .logo a {}
 #header .nav-toggle {
  width: 35px;
  height: 35px;
  display: block;
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
 }
 #header .nav-toggle::before {
  content: "";
  width: 100%;
  height: 100%;
  background: #FFF;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: .2s;
     -moz-transition: .2s;
      -ms-transition: .2s;
       -o-transition: .2s;
          transition: .2s;
 }
 .nav-open #header .nav-toggle::before { background: #111;}
 #header .nav-toggle span {
  display: block;
  position: absolute;
  border-bottom: solid 1px #111;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  width: 19px;
  left: 8px;
 }
 #header .nav-toggle.active span { border-bottom: solid 1px #111;}
 #header .nav-toggle span:nth-child(1) { top: 14px;}
 #header .nav-toggle span:nth-child(2) { top: 20px;}
 #header .nav-toggle.active span:nth-child(1) {
  border-color: #FFF;
  top: 17px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
 }
 #header .nav-toggle.active span:nth-child(2) {
  border-color: #FFF;
  top: 17px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
 }
 #header .sp-nav-cont {
  width: 100vw;
  height: 100vh;
  padding: 60px 6.0385vw;
  display: none;
  opacity: 0;
  user-select: none;
  background-color: #FFF;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  position: fixed;
  top: 0;
  z-index: 95;
  -ms-overflow-y: auto;
      overflow-y: auto;
 }
 #header .sp-nav-cont.active {
  display: block;
  animation: fadein .5s ease-in-out forwards;
 }
 #header .sp-nav-cont.active_off {
  animation: fadeout .5s ease-in-out forwards;
 }
 #header .sp-nav-cont .global-menu {
  margin: 0;
  position: relative;
  left: auto;
  top: auto;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
 }
 #header .sp-nav-cont .global-menu .nav-list-main li a {
  padding: 10px 0;
  line-height: 1.5;
  font-size: 14px;
 }
 #header .header-wrap .global-menu .nav-list-sub {
  padding-top: 0;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
 }
 #header .header-wrap .global-menu .nav-list-sub::before { content: none;}
 #header .header-wrap .global-menu .nav-list-sub li { margin: 0 20px 10px 0;}
 #header .header-wrap .global-menu .nav-list-sub li a {
  line-height: 1.5;
  font-size: 12px;
 }
 #header .header-wrap .header-copy { display: none;}
 #header .sp-nav-cont .btn-contact {
  width: 87.923vw;
  margin: 40px auto 0;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  position: relative;
  left: auto;
  bottom: auto;
 }
 #header .sp-nav-cont .btn-contact a {
  width: 50%;
  padding: 0 14px;
  line-height: 52px;
 }
 #header .sp-nav-cont .btn-contact a:last-child {
  margin-top: 0;
  margin-left: 1px;
 }
 #header .header-wrap .btn-contact .icon { font-size: 18px;}
 #header .header-wrap .btn-contact .txt { font-size: 14px;}
}
@media screen and (max-height: 800px) and (min-width: 961px) {
 #header .header-wrap { padding: 25px 25px 12px;}
 #header .header-wrap .logo a { width: 100%;}
 #header .header-wrap .header-copy {
  margin-top: 13px;
  font-size: 10px;
 }
 
 #header .header-wrap .global-menu {
  margin-top: 40px;
  position: relative;
  left: auto;
  top: auto;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
 }
 #header .header-wrap .global-menu .nav-list-main li a {
  line-height: 2.2;
  font-size: 13px;
 }
 #header .header-wrap .global-menu .nav-list-sub li a {
  line-height: 2.2;
  font-size: 11px;
 }
 #header .header-wrap .global-menu .btn-insta { margin-top: 15px;}
 #header .header-wrap .global-menu .btn-insta a { font-size: 24px;}
 #header .header-wrap .header-copy {
  margin: 30px 0 0 -12px;
  font-size: 10px;
  bottom: 143px;
  position: relative;
  left: auto;
  bottom: auto;
 }
 #header .header-wrap .btn-contact {
  margin: 12px 0 0 -25px;
  position: relative;
  left: auto;
  bottom: auto;
 }
 #header .header-wrap .btn-contact a {
  width: 160px;
  padding: 0 13px;
  line-height: 56px;
 }
 #header .header-wrap .btn-contact a:last-child { margin-top: 7px;}
 #header .header-wrap .btn-contact .icon { font-size: 17px;}
 #header .header-wrap .btn-contact .txt { font-size: 13px;}
}

@keyframes fadein {
 0% {
  opacity: 0;
  visibility: hidden;
 }
 100% {
  opacity: 1;
  visibility: visible;
  }
}

@keyframes fadeout {
 0% {
  opacity: 1;
  visibility: visible;
 }
 100% {
  opacity: 0;
  visibility: hidden;
 }
}

/*--------------------------------------------------------------------------
 tltle
--------------------------------------------------------------------------*/
.en-tit {
 font-family: din-2014, sans-serif;
 font-weight: 600;
}
.title-box { margin-bottom: 60px;}
.title-box .en-tit.circle {
 margin-bottom: 25px;
 padding-left: 18px;
 letter-spacing: .2em;
 line-height: 1.3;
 font-size: 14px;
 position: relative;
}
.title-box .en-tit.circle::before {
 content: "";
 width: 8px;
 height: 8px;
 background: #326CDB;
 -webkit-border-radius: 50%;
         border-radius: 50%;
 position: absolute;
 top: 50%;
 left: 0;
 -webkit-transform: translateY(-60%);
 -ms-transform: translateY(-60%);
 transform: translateY(-60%);
}
.title-box .ja-tit {
 letter-spacing: .1em;
 line-height: 1.5;
 font-size: 30px;
 font-weight: 600;
}
.title-box .ja-tit.size-l { font-size: 40px;}
.title-box .ja-tit + p {
 margin-top: 1.5em;
 text-align: justify;
}

@media screen and (max-width: 1200px) {
 .title-box { margin-bottom: 45px;}
 .title-box .en-tit.circle {
  margin-bottom: 20px;
  padding-left: 15px;
  font-size: 12px;
 }
 .title-box .en-tit.circle::before {
  width: 6px;
  height: 6px;
 }
 .title-box .ja-tit { font-size: 24px;}
 .title-box .ja-tit.size-l { font-size: 32px;}
}
@media screen and (max-width: 768px) {
 .title-box { margin-bottom: 35px;}
 .title-box .en-tit.circle {
  margin-bottom: 15px;
  padding-left: 12px;
  font-size: 10px;
 }
 .title-box .en-tit.circle::before {
  width: 5px;
  height: 5px;
 }
 .title-box .ja-tit { font-size: 20px;}
 .title-box .ja-tit.size-l { font-size: 25px;}
}

/*--------------------------------------------------------------------------
 ボタン
--------------------------------------------------------------------------*/
.txt-btn,
a.txt-btn {
 display: inline-flex;
 -webkit-align-items: center;
         align-items: center;
 line-height: 1;
 color: #326CDB;
 position: relative;
 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
         transition: all .3s ease-in-out;
}
a:hover .txt-btn,
.txt-btn:hover { color: #111;}
.txt-btn::after {
 content: "";
 width: 0;
 height: 1px;
 background: #111;
 position: absolute;
 left: 0;
 bottom: 0;
 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
         transition: all .3s ease-in-out;
}
a:hover .txt-btn::after,
.txt-btn:hover::after { width: 100%;}
.txt-btn .txt {
 line-height: 26px;
 font-size: 13px;
 font-weight: 600;
}
.txt-btn .icon {
 margin-top: -.1em;
 margin-left: .5em;
 line-height: 26px;
 font-size: 16px;
}

.basic-btn a {
 width: 360px;
 margin: 0 auto;
 display: block;
 text-align: center;
 line-height: 65px;
 color: #FFF;
 background: #111;
 position: relative;
}
.basic-btn a:hover { background: #326CDB;}
.basic-btn.center a { margin: 0 auto;}
.basic-btn a .txt {
 font-size: 13px;
 font-weight: 600;
}
.basic-btn a .icon {
 font-size: 20px;
 position: absolute;
 top: 50%;
 right: 20px;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}

@media screen and (max-width: 1200px) {
 .txt-btn .txt {
  line-height: 22px;
  font-size: 11px;
 }
 .txt-btn .icon {
  margin-top: 0;
  line-height: 22px;
  font-size: 14px;
 }
 .basic-btn a {
  width: 290px;
  line-height: 52px;
 }
 .basic-btn a .txt { font-size: 11px;}
 .basic-btn a .icon {
  font-size: 16px;
  right: 15px;
 }
}
@media screen and (max-width: 768px) {
 .txt-btn .txt {
  line-height: 20px;
  font-size: 10px;
 }
 .txt-btn .icon {
  line-height: 20px;
  font-size: 12px;
 }
 .basic-btn a { width: 235px;}
 .basic-btn a .icon { right: 10px;}
}

/*--------------------------------------------------------------------------
 page-title
--------------------------------------------------------------------------*/
#page-title {
 padding: 120px 0 80px;
 position: relative;
}
#page-title .en-tit {
 position: absolute;
 top: 30px;
 right: 30px;
 writing-mode: vertical-rl;
}
#page-title .en-tit span {
display: block;
letter-spacing: .2em;
line-height: 1.6;
font-family: din-2014, sans-serif;
font-size: 18px;
font-weight: 400;
}
#page-title .page-tit {
 line-height: 1.5;
 font-size: 46px;
 font-weight: 600;
}
#page-title .page-tit-copy,
#page-title .item-data {
 margin-top: 1.25em;
 text-align: justify;
 line-height: 1.8;
}
#page-title .item-data time {
 margin-right: .8em;
 padding-right: .8em;
 border-right: 1px solid #333;
}

@media screen and (max-width: 1200px) {
 #page-title { padding: 100px 0 60px;}
 #page-title .en-tit {
  top: 25px;
  right: 25px;
 }
 #page-title .en-tit span { font-size: 15px;}
 #page-title .page-tit { font-size: 34px;}
}
@media screen and (max-width: 768px) {
 #page-title { padding: 60px 0 45px;}
 #page-title .en-tit {
  margin: 0 0 .5em 6.0385vw;
  position: relative;
  top: auto;
  right: auto;
  writing-mode: horizontal-tb;
 }
 #page-title .en-tit span { font-size: 12px;}
 #page-title .page-tit { font-size: 25px;}
}

/*--------------------------------------------------------------------------
 page-main-visual
--------------------------------------------------------------------------*/
#page-main-visual {
 width: calc(100% - 280px);
 margin: 0 0 0 280px;
}
#page-main-visual .hero-image {
 height: 0;
 padding-top: 41.425%;
}
@media screen and (min-width: 1700px) {
 #page-main-visual {
  width: 82.2916666vw;
  margin: 0 0 0 auto;
 }
}
@media screen and (max-width: 1200px) {
 #page-main-visual {
  width: calc(100% - 220px);
  margin: 0 0 0 220px;
 }
}
@media screen and (max-width: 960px) {
 #page-main-visual {
  width: 100%;
  margin: 0;
 }
 #page-main-visual .hero-image { padding-top: 57.7368%;}
}

/*--------------------------------------------------------------------------
 コンポーネント
--------------------------------------------------------------------------*/
.works-info .category {
 line-height: 1.5;
 color: #939FA8;
 font-size: 14px;
 font-weight: 600;
}
.works-info .project {
 margin-top: .33em;
 line-height: 1.6;
 font-size: 18px;
 font-weight: 600;
}
.works-info .genre {
 margin-top: 15px;
 display: flex;
 -webkit-align-items: center;
         align-items: center;
}
.works-info .genre dt {
 width: 3.5em;
 padding: .25em 0;
 text-align: center;
 line-height: 1;
 font-size: 12px;
 border: 1px solid #333;
}
.works-info .genre dd {
 padding-left: .75em;
 line-height: 1.6;
 font-size: 14px;
}
.works-info .tag {
 margin-top: .75em;
 line-height: 1.3;
}
.works-info .tag span {
 color: #939FA8;
 font-size: 12px;
 position: relative;
}
.works-info .tag span:not(:last-child)::after { content: " / ";}

.voice-list figure {position: relative;}
.voice-list figure .voice-logo {
 width: 17.5%;
 line-height: 0;
 position: absolute;
 right: .5vw;
 bottom: .5vw;
}
.voice-info .copy {
 line-height: 1.6;
 font-size: 18px;
 font-weight: 600;
}
.voice-info .company {
 margin-top: .75em;
 line-height: 1.5;
 font-size: 14px;
}
.voice-info .tag {
 margin-top: 30px;
 display: flex;
 -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
}
.voice-info .tag span {
 margin: 0 .5em .5em 0;
 padding: 0 1em;
 line-height: 26px;
 font-size: 12px;
 background: #F0F4F7;
 -webkit-border-radius: 13px;
         border-radius: 13px;
}
.post-pagenation {
 text-align: center;
 line-height: 13px;
 font-size: 11px;
 position: relative;
}
.post-pagenation span,
.post-pagenation a {
 margin: 2px 2px 2px 0;
 padding: 1.3em 1.5em;
 display: inline-block;
 line-height: 1;
 width: auto;
 color: #111;
 background: #FFF;
}
.post-pagenation a:hover {
 color: #fff;
 background: #111;
}

.post-pagenation .current {
 padding: 1.3em 1.5em;
 background: #111;
 color: #fff;
}

@media screen and (max-width: 1200px) {
 .works-info .category { font-size: 12px;}
 .works-info .project { font-size: 15px;}
 .works-info .genre { margin-top: 12px;}
 .works-info .genre dt { font-size: 10px;}
 .works-info .genre dd { font-size: 12px;}
 .works-info .tag span { font-size: 10px;}
}
@media screen and (max-width: 768px) {
 .voice-list figure .voice-logo {
  right: 2.5vw;
  bottom: 2.5vw;
 }
 .voice-info .copy { font-size: 15px;}
 .voice-info .company { font-size: 12px;}
 .voice-info .tag { margin-top: 25px;}
 .voice-info .tag span {
  line-height: 22px;
  font-size: 10px;
  -webkit-border-radius: 11px;
          border-radius: 11px;
 }
}

/*--------------------------------------------------------------------------
 投稿ページ
--------------------------------------------------------------------------*/
#post-head { position: relative;}
#post-head::before {
 content: "";
 width: 100%;
 height : -webkit-calc(100% - 22vw);
 height : calc(100% - 22vw);
 background: #F0F4F7;
 position: absolute;
 top: 22vw;
 left: 0;
 z-index: -1;
}
#post-head .post-head-wrap {
 padding-bottom: 80px;
 border-bottom: 2px solid #485157;
}
#post-head .hero .mov-wrap,
#post-head .hero .img-wrap {
 width: 100%;
 height: 0;
 padding-top: 56.25%;
 line-height: 1;
 position: relative;
 overflow: hidden;
}
#post-head .hero .mov-wrap iframe {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 right: 0;
}
#post-head .hero .img-wrap img {
 width: 100%;
 height: auto;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translateY(-50%) translateX(-50%);
 -ms-transform: translateY(-50%) translateX(-50%);
 transform: translateY(-50%) translateX(-50%);
}
#post-head .project-name {
 line-height: 1.6;
 font-size: 18px;
 font-weight: 600;
}
#post-head .project-info {
 display: flex;
 -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
}
#post-head .project-info dt {
 width: 7em;
 margin-top: 12px;
 padding: .5em 0;
 -webkit-flex-shrink: 0;
         flex-shrink: 0;
 text-align: center;
 line-height: 1;
 font-size: 14px;
 border: 1px solid #333;
}
#post-head .project-info dd {
 width : -webkit-calc(100% - 8em);
 width : calc(100% - 8em);
 margin-top: 12px;
 margin-left: 1em;
 line-height: 1.8;
}
#post-head .project-info dd span:not(:last-child)::after { content: " / "; }

#post-body {
 padding: 80px 0 120px;
 background: #F0F4F7;
}
.news-post #post-body {
 padding: 0;
 background: transparent;
}
.news-post #post-body .news-post-wrap {
 padding: 80px 0;
 border-top: 2px solid #485157;
 border-bottom: 2px solid #485157;
}
#post-body .block-image,
#post-body .block {
 max-width: 960px;
 margin-left: auto;
 margin-right: auto;
 text-align: justify;
}
#post-body .block-image { margin-top: 90px; }
#post-body .block:not(:first-of-type) {
 margin-top: 90px;
 padding-top: 90px;
 position: relative;
}
#post-body .block:not(:first-of-type)::before {
 content: "";
 width: 100px;
 height: 1px;
 background: #333;
 position: absolute;
 top: 0;
 left: 0;
}
#post-body .block-image + .block {
 margin-top: 90px;
 padding-top: 0;
}
#post-body .block-image + .block::before { content: none;}
#post-body .block .block-tit {
 text-align: left;
 line-height: 1.6;
 font-size: 30px;
 font-weight: 600;
}
#post-body .block .block-tit-s {
 text-align: left;
 line-height: 1.6;
 font-size: 20px;
 font-weight: 600;
}
#post-body .block .block-tit + p {margin-top: 1.5em;}
#post-body .block .block-tit-s + p { margin-top: .75em;}
#post-body .block p a { color: #326CDB;}
#post-body .block p a:hover { color: #111;}
#post-body .block .voice-box {}
#post-body .block .voice-box a {
 display: flex;
 -webkit-align-items: center;
         align-items: center;
}
#post-body .block .voice-box a figure {
 width: 30%;
 -webkit-flex-shrink: 0;
         flex-shrink: 0;
}
#post-body .block .voice-box a .voice-info { margin-left: 6%;}
#post-body .client {
 max-width: 960px;
 margin-left: auto;
 margin-right: auto;
 background: #FFF;
}
#post-body .client figure {
 width: 20.83333%;
 position: absolute;
 top: 50%;
 right: -6%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}
#post-body .client .txt-wrap { padding: 60px 20% 60px 6%;}
#post-body .client .txt-wrap .en-tit {
 line-height: 1;
 font-size: 12px;
 font-weight: 400;
}
#post-body .client .txt-wrap .en-tit span {
 padding-right: 40px;
 position: relative;
}
#post-body .client .txt-wrap .en-tit span::after {
 content: "";
 width: 30px;
 height: 1px;
 background: #333;
 position: absolute;
 top: 50%;
 right: 0;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}
#post-body .client .txt-wrap .client-name {
 text-align: justify;
 line-height: 1.6;
 font-size: 20px;
 font-weight: 600;
}
#post-body .client .txt-wrap .client-name + p {
 text-align: justify;
 line-height: 1.8;
}
#post-body .member {
 max-width: 960px;
 margin-left: auto;
 margin-right: auto;
 display: flex;
 position: relative;
}
#post-body .member::before {
 content: "";
 width: 1px;
 height: 100%;
 background: #9EA0A2;
 position: absolute;
 top: 0;
 left: 20.8333%;
}
#post-body .member .img-wrap {
 width: 14.58333%;
 -webkit-flex-shrink: 0;
         flex-shrink: 0;
 -webkit-order: -1;
     -ms-order: -1;
         order: -1;
 text-align: center;
}
#post-body .member .img-wrap figure {
 width: 100%;
 height: 0;
 padding-top: 100%;
 position: relative;
 -webkit-border-radius: 50%;
         border-radius: 50%;
 overflow: hidden;
}
#post-body .member .img-wrap figure img {
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
}
#post-body .member .img-wrap dl {}
#post-body .member .img-wrap dl dt {
 line-height: 1;
 font-size: 12px;
 font-weight: 400;
}
#post-body .member .img-wrap dl .en-tit {
 margin-top: .3em;
 letter-spacing: .2em;
 line-height: 1;
 font-size: 20px;
 font-weight: 600;
}
#post-body .member .txt-wrap { margin-left: 12.5%;}
#post-body .member .txt-wrap .member-tit {
 line-height: 1.5;
 font-size: 30px;
 font-weight: 600;
}
#post-body .member .txt-wrap .member-tit + p { text-align: justify;}

@media screen and (max-width: 1200px) {
 #post-head .post-head-wrap { padding-bottom: 60px;}
 #post-head .project-name { font-size: 15px;}
 #post-head .project-info dt {
  margin-top: 10px;
  font-size: 12px;
 }
 #post-head .project-info dd { margin-top: 10px;}
 #post-body { padding: 60px 0 90px;}
 .news-post #post-body .news-post-wrap { padding: 60px 0;}
 #post-body .block:not(:first-of-type) {
  margin-top: 70px;
  padding-top: 70px;
 }
 #post-body .block:not(:first-of-type)::before { width: 75px;}
 #post-body .block .block-tit { font-size: 24px;}
 #post-body .block .block-tit-s { font-size: 16px;}
 #post-body .client .txt-wrap { padding: 50px 20% 50px 6%;}
 #post-body .client .txt-wrap .en-tit { font-size: 10px;}
 #post-body .client .txt-wrap .en-tit span { padding-right: 32px;}
 #post-body .client .txt-wrap .en-tit span::after { width: 24px;}
 #post-body .client .txt-wrap .client-name { font-size: 16px;}
 #post-body .member .img-wrap dl dt { font-size: 10px;}
 #post-body .member .img-wrap dl .en-tit { font-size: 16px;}
 #post-body .member .txt-wrap { margin-left: 12.5%;}
 #post-body .member .txt-wrap .member-tit { font-size: 24px;}
}
@media screen and (max-width: 768px) {
 #post-head::before {
  height : 100%;
  top: 0;
 }
 #post-head .post-head-wrap { padding-bottom: 45px;}
 #post-head .hero {
  width: 100vw;
  margin-left: -6.0385vw;
 }
 #post-head .project-name { font-size: 14px;}
 #post-head .project-info dt {
  margin-top: 8px;
  font-size: 10px;
 }
 #post-head .project-info dd {
  margin-top: 8px;
  font-size: 12px;
 }
 #post-body { padding: 45px 0 70px;}
 .news-post #post-body .news-post-wrap { padding: 45px 0;}
 #post-body .block:not(:first-of-type) {
  margin-top: 50px;
  padding-top: 50px;
 }
 #post-body .block:not(:first-of-type)::before { width: 50px;}
 #post-body .block .block-tit { font-size: 20px;}
 #post-body .block .block-tit-s { font-size: 15px;}
 #post-body .block .voice-box a {
  -webkit-align-items: flex-start;
          align-items: flex-start;
 }
 #post-body .block .voice-box a .voice-info .copy { font-size: 13px;}
 #post-body .block .voice-box a .voice-info .company { font-size: 10px;}
 #post-body .client { margin-top : calc(70px + 15vw);}
 #post-body .client figure {
  width: 30vw;
  top: -15vw;
  top: 0;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
 }
 #post-body .client .txt-wrap {
  padding: 22vw 6.0385vw 6.0385vw;
  position: relative;
 }
 #post-body .client .txt-wrap .en-tit { display: none;}
 #post-body .client .txt-wrap .client-name {
  margin-top: 0;
  font-size: 14px;
 }
 #post-body .client .txt-wrap .client-name + p { font-size: 12px;}
 #post-body .member { display: block;}
 #post-body .member::before { content: none;}
 #post-body .member .img-wrap {
  width: 100%;
  margin-top: 25px;
  padding-top: 25px;
  display: flex;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  border-top: 1px solid #DCE0E3;
 }
 #post-body .member .img-wrap figure {
  width: 18vw;
  padding-top: 18vw;
 }
 #post-body .member .img-wrap dl {
  margin-left: 6%;
  text-align: left;
 }
 #post-body .member .img-wrap dl dt { font-size: 10px;}
 #post-body .member .img-wrap dl .en-tit { font-size: 16px;}
 #post-body .member .txt-wrap {
  width: 100%;
  margin-left: 0;
 }
 #post-body .member .txt-wrap .member-tit { font-size: 20px;}
}

/*--------------------------------------------------------------------------
 breadcrumb
--------------------------------------------------------------------------*/
#breadcrumb {
 height: 0;
 position: relative;
}
#breadcrumb .nav-cont {
 width: 100%;
 position: absolute;
 bottom: -175px;
 left: 0;
}
#breadcrumb ol { display: flex;}
#breadcrumb ol li {
 color: #111;
 font-size: 12px;
 position: relative;
}
#breadcrumb ol li a { position: relative;}
#breadcrumb ol li a::after {
 content: ">";
 padding: 0 0.3em;
 vertical-align: baseline;
 color: #111;
}
@media screen and (max-width: 1200px) {
 #breadcrumb .nav-cont { bottom: -130px;}
 #breadcrumb ol li {
  display: inline-block;
  font-size: 10px;
 }
}
@media screen and (max-width: 768px) {
 #breadcrumb .nav-cont { bottom: -88px;}
 #breadcrumb ol {
  display:block;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  overflow: auto;
  white-space: nowrap;
 }
}


/*--------------------------------------------------------------------------
 aside
--------------------------------------------------------------------------*/
.p-aside { margin-top: 200px;}
.p-aside .p-link {
 display: flex;
 position: relative;
}
.p-aside .p-link::before,
.p-aside .p-link::after {
 content: "";
 width: 1px;
 height: 100%;
 background: #FFF;
 position: absolute;
 z-index: 10;
}
.p-aside .p-link::before { left: 33.333%;}
.p-aside .p-link::after { left: 66.666%;}
.p-aside .p-link li { width: 33.333%;}
.p-aside .p-link li a {
 height: 0;
 padding-top: 56.25%;
 display: block;
 position: relative;
}
.p-aside .p-link li a .bg {
 width: 100%;
 height: 100%;
 background-position: center center;
 -webkit-background-size: cover;
      -o-background-size: cover;
         background-size: cover;
 position: absolute;
 top: 0;
 left: 0;
}
.p-aside .p-link .link-price a .bg { background-image: url(../images/common/aside/price.jpg);}
.p-aside .p-link .link-case a .bg { background-image: url(../images/common/aside/case.jpg);}
.p-aside .p-link .link-shop a .bg { background-image: url(../images/common/aside/shop.jpg);}
.p-aside .p-link li a .bg::after {
 content: "";
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, .3);
 mix-blend-mode: darken;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
         transition: all .3s ease-in-out;
}
.p-aside .p-link li a:hover .bg::after { background: rgba(0, 0, 0, .1);}
.p-aside .p-link li a .txt-wrap {
 color: #FFF;
 position: absolute;
 left: 6%;
 bottom: 9%;
}
.p-aside .p-link li a .txt-wrap span { display: block;}
.p-aside .p-link li a .txt-wrap .en-tit {
 letter-spacing: 0.16em;
 line-height: 1;
 font-size: 26px;
}
.p-aside .p-link li a .txt-wrap .ja-tit {
 margin-top: .75em;
 line-height: 1.3;
 font-size: 13px;
}
.p-aside .p-link li a .icon-arrow {
 width: 48px;
 height: 48px;
 color: #FFF;
 text-align: center;
 line-height: 48px;
 font-size: 20px;
 position: absolute;
 right: 6%;
 bottom: 9%;
}
.p-aside .p-link li a .icon-arrow::after {
 content: "";
 width: 100%;
 height: 100%;
 border: 1px solid rgba(255, 255, 255, .5);
 position: absolute;
 top: 0;
 right: 0;
 -webkit-border-radius: 50%;
         border-radius: 50%;
}
.p-aside .p-cta {
 margin-top: 120px;
 position: relative;
}
.p-aside .p-cta::before {
 content: "";
 width: 100%;
 height : -webkit-calc(100% - 20px);
 height : calc(100% - 20px);
 background: #F0F4F7;
 position: absolute;
 top: 20px;
 left: 0;
}
.p-aside .p-cta .cta-tit .en-tit {
 letter-spacing: .16em;
 line-height: 1;
 font-size: 40px;
}
.p-aside .p-cta .cta-tit .ja-tit {
 margin-top: .75em;
 font-size: 20px;
 font-weight: 600;
}
.p-aside .p-cta .cta-list {
 display: flex;
 -webkit-justify-content: space-between;
         justify-content: space-between;
}
.p-aside .p-cta .cta-list li { width: 48.5%;}
.p-aside .p-cta .cta-list li a {
 padding: 10% 7.5% 10% 10%;
 display: flex;
 -webkit-align-items: center;
         align-items: center;
 -webkit-justify-content: space-between;
         justify-content: space-between;
 color: #FFF;
 background: #111;
}
.p-aside .p-cta .cta-list li a:hover { background: #326CDB;}
.p-aside .p-cta .cta-list li a .txt-wrap h3 {
 font-size: 24px;
 font-weight: 600;
}
.p-aside .p-cta .cta-list li a .txt-wrap p {
 margin-top: 1em;
 line-height: 1.8;
}
.p-aside .p-cta .cta-list li a .icon {
 width: 60px;
 height: 60px;
 text-align: center;
 line-height: 60px;
 color: #2CA5F2;
 font-size: 22px;
 position: relative;
 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
         transition: all .3s ease-in-out;
}
.p-aside .p-cta .cta-list li a:hover .icon { color: #FFF;}
.p-aside .p-cta .cta-list li a .icon::after {
 content: "";
 width: 100%;
 height: 100%;
 border: 1px solid rgba(255, 255, 255, .5);
 position: absolute;
 top: 0;
 right: 0;
 -webkit-border-radius: 50%;
         border-radius: 50%;
 -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
         transition: all .3s ease-in-out;
}

@media screen and (max-width: 1200px) {
 .p-aside { margin-top: 150px;}
 .p-aside .p-link li a .txt-wrap .en-tit { font-size: 20px;}
 .p-aside .p-link li a .txt-wrap .ja-tit { font-size: 11px;}
 .p-aside .p-link li a .icon-arrow {
  width: 38px;
  height: 38px;
  line-height: 38px;
  font-size: 16px;
 }
 .p-aside .p-cta { margin-top: 100px;}
 .p-aside .p-cta::before {
  height : -webkit-calc(100% - 17px);
  height : calc(100% - 17px);
  top: 17px;
 }
 .p-aside .p-cta .cta-tit .en-tit { font-size: 32px;}
 .p-aside .p-cta .cta-tit .ja-tit { font-size: 16px;}
 .p-aside .p-cta .cta-list li a { padding: 10% 5% 10% 6.666%;}
 .p-aside .p-cta .cta-list li a .txt-wrap h3 { font-size: 20px;}
 .p-aside .p-cta .cta-list li a .icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 17px;
 }
}
@media screen and (max-width: 768px) {
 .p-aside { margin-top: 100px;}
 .p-aside .p-link { display: block;}
 .p-aside .p-link::before,
 .p-aside .p-link::after { content: none;}
 .p-aside .p-link::before {
  top: 33.333%;
  left: 0;
 }
 .p-aside .p-link::after {
  top: 66.666%;
  left: 66.666%;
 }
 .p-aside .p-link li { width: 100%;}
 .p-aside .p-link li:not(:first-child) { margin-top: 1px;}
 .p-aside .p-link li a { padding-top: 50%;}
 .p-aside .p-link .link-price a .bg { background-position: center 30%;}
 .p-aside .p-cta { margin-top: 70px;}
 .p-aside .p-cta::before {
  height : -webkit-calc(100% - 16px);
  height : calc(100% - 16px);
  top: 16px;
 }
 .p-aside .p-cta .cta-tit .en-tit { font-size: 28px;}
 .p-aside .p-cta .cta-tit .ja-tit { font-size: 14px;}
 .p-aside .p-cta .cta-list { display: block;}
 .p-aside .p-cta .cta-list li { width: 100%;}
 .p-aside .p-cta .cta-list li:last-child { margin-top: 20px;}
 .p-aside .p-cta .cta-list li a { padding: 10% 5% 10% 6.666%;}
 .p-aside .p-cta .cta-list li a .txt-wrap h3 { font-size: 18px;}
 .p-aside .p-cta .cta-list li a .txt-wrap p { font-size: 12px;}
}

/*--------------------------------------------------------------------------
 footer
---------------------------------------------------------------------------*/
#footer {
 padding: 150px 0;
 background: #F0F4F7;
}
#footer .footer-wrap {
 display: flex;
 -webkit-justify-content: space-between;
         justify-content: space-between;
}
#footer .footer-wrap .footer-logo { width: 30%;}
#footer .footer-wrap .footer-logo a {
 width: 150px;
 display: block;
 line-height: 0;
}
#footer .footer-wrap .footer-nav {
 width : 70%;
 display: flex;
 -webkit-justify-content: space-between;
         justify-content: space-between;
}
#footer .footer-wrap .footer-nav .nav-col { width: 25%;}
#footer .footer-wrap .footer-nav .nav-col ul li { line-height: 1.5;}
#footer .footer-wrap .footer-nav .nav-col ul li:not(:last-child) { margin-bottom: 10px;}
#footer .footer-wrap .footer-nav .nav-col ul li a {
 font-size: 13px;
 font-weight: 600;
}
#footer .btn-insta {
 margin-top: 70px;
 text-align: center;
 line-height: 1;
}
#footer .btn-insta a {
 line-height: 1;
 font-size: 28px;
}
#footer .copy-right {
 margin-top: 4em;
 text-align: center;
 line-height: 1;
 font-size: 10px;
}

@media screen and (max-width: 1200px) {
 #footer { padding: 120px 0;}
 #footer .footer-wrap .footer-logo a { width: 120px;}
 #footer .footer-wrap .footer-nav .nav-col ul li:not(:last-child) { margin-bottom: 8px;}
 #footer .footer-wrap .footer-nav .nav-col ul li a { font-size: 11px;}
 #footer .btn-insta { margin-top: 50px;}
 #footer .btn-insta a { font-size: 24px;}
 #footer .copy-right { font-size: 9px;}
}
@media screen and (max-width: 768px) {
 #footer { padding: 70px 0;}
 #footer .footer-wrap {
  padding: 40px 0;
  display: block;
  border-top: 1px solid #DCE0E3;
  border-bottom: 1px solid #DCE0E3;
 }
 #footer .footer-wrap .footer-logo { display: none;}
 #footer .footer-wrap .footer-nav {
  width: 100%;
  display: block;
 }
 #footer .footer-wrap .footer-nav .nav-col {
  width: 100%;
  display: block;
 }
 #footer .footer-wrap .footer-nav .nav-col ul {
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
 }
 #footer .footer-wrap .footer-nav .nav-col ul li { width: 50%;}
 #footer .footer-wrap .footer-nav .nav-col ul li:not(:last-child) { margin-bottom: 20px;}
 #footer .footer-wrap .footer-nav .nav-col:last-child ul li { margin-bottom: 0;}
 #footer .footer-wrap .footer-nav .nav-col ul li a { font-size: 13px;}
 #footer .btn-insta { margin-top: 40px;}
 #footer .copy-right { margin-top: 2em;}
}

/* Gutenberg */
.loader {
 background: #fff;
 height: 100%;
 left: 0;
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 99999;
}