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

/* ---------------------------------------------------------
common
----------------------------------------------------------*/
html,
body {
  height: 100%;
  font-size: 62.5%;
}
body {
	width: 100%;
  min-width: 1160px;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック体","Yu Gothic Medium",YuGothic,"メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size: 1.3rem;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	line-height: 1;
	color: #000;
	background-color: #fff;
	-webkit-text-size-adjust: 100%;
}
body.is-fixed {
  position: fixed;
}
* {
  box-sizing: border-box;
}
img {
  width: 100%;
  height: auto;
  vertical-align: top;
  line-height: 1;
}
a {
  color: #000; 
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
.show-sp {
  display: none;
}

#white {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 10;
}

/* ---------------------------------------------------------
animation
----------------------------------------------------------*/
.animeBefore {
	visibility: hidden;
}
.dispAnime {
	visibility: visible;
	animation-name: dispAnime;
	animation-duration: 400ms;
  animation-timing-function: bezier(0.19, 1, 0.22, 1);
}
/* transform 650ms cubic-bezier(0.19, 1, 0.22, 1) */
.fixAnime {
	visibility: visible;
}
@keyframes dispAnime {
  from {
	  transform: scaleY(0);
  }
  to {
	  transform: scaleY(1);
  }
}

/* ---------------------------------------------------------
main
----------------------------------------------------------*/
main {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #84B9C0;
  z-index: 2;
}
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  height: 77px;
  margin: -43px 0 0 -444px;
  overflow: hidden;
}
h1 span {
  display: block;
  height: 77px;
  text-indent: -9999px;
  background: url("../img/ttl_01.svg") no-repeat;
  background-size: auto 100%;
  transform: translateY(77px);
  transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1);
}
h1 span.is-show {
  transform: translateY(0);
}
h1 .ttl1 { width: 68px; background-image: url("../img/ttl_c.svg"); margin-right: 4px;}
h1 .ttl2 { width: 72px; background-image: url("../img/ttl_o.svg"); margin-right: 7px;}
h1 .ttl3 { width: 52px; height: 73px; background-image: url("../img/ttl_l.svg"); margin-right: -1px;}
h1 .ttl4 { width: 72px; background-image: url("../img/ttl_o.svg"); margin-right: 7px;}
h1 .ttl5 { width: 63px; height: 73px; background-image: url("../img/ttl_r.svg"); margin-right: 17px;}
h1 .ttl6 { width: 70px; height: 73px; background-image: url("../img/ttl_y.svg"); margin-right: -6px;}
h1 .ttl7 { width: 72px; background-image: url("../img/ttl_o.svg"); margin-right: 7px;}
h1 .ttl8 { width: 62px; height: 75px; background-image: url("../img/ttl_u.svg"); margin-right: 9px; margin-top: 2px;}
h1 .ttl9 { width: 63px; height: 73px; background-image: url("../img/ttl_r.svg"); margin-right: 27px;}
h1 .ttl10 { width: 52px; height: 73px; background-image: url("../img/ttl_l.svg"); margin-right: 4px;}
h1 .ttl11 { width: 16px; height: 73px; background-image: url("../img/ttl_i.svg"); margin-right: 11px;}
h1 .ttl12 { width: 52px; height: 73px; background-image: url("../img/ttl_f.svg"); margin-right: 4px;}
h1 .ttl13 { width: 56px; height: 73px; background-image: url("../img/ttl_e.svg"); margin-right: 6px;}
h1 .ttl14 { width: 16px; height: 73px; background-image: url("../img/ttl_ex.svg"); margin-right: 0;}

main .lead-box {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: Helvetica, Arial, "sans-serif";
  font-size: 23px;
  font-weight: bold;
  color: #00693E;
  margin: 58px 0 0 -445px;
}

.lead-box > span {
  display: flex;
  height: 22px;
  overflow: hidden;
  margin-bottom: 10px;
}
.lead-box .lead2 {
  margin-bottom: 9px;
}
.lead-box span span {
  display: block;
  text-indent: -9999px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 5px;
  transform: translateY(22px);
  transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1);
}
.lead-box span span.is-show {
  transform: translateY(0);
}

.lead-box .txt-v-big { width: 15px; height: 17px; background-image: url("../img/lead_txt/txt_v_big.svg"); margin: 0 -1px 0 0;}
.lead-box .txt-a { width: 11px; height: 12px; background-image: url("../img/lead_txt/txt_a.svg"); margin-right: 2px;}
.lead-box .txt-r { width: 8px; height: 12px; background-image: url("../img/lead_txt/txt_r.svg");}
.lead-box .txt-i { width: 4px; height: 17px; background-image: url("../img/lead_txt/txt_i.svg"); margin: 0 1px 0 0;}
.lead-box .txt-o { width: 12px; height: 12px; background-image: url("../img/lead_txt/txt_o.svg"); margin-right: 2px;}
.lead-box .txt-u { width: 11px; height: 12px; background-image: url("../img/lead_txt/txt_u.svg"); margin-right: 1px;}
.lead-box .txt-s { width: 11px; height: 12px; background-image: url("../img/lead_txt/txt_s.svg");}
.lead-box .txt-g {width: 12px; height: 17px; background-image: url("../img/lead_txt/txt_g.svg"); margin-right: 2px;}
.lead-box .txt-d {width: 13px; height: 16px; background-image: url("../img/lead_txt/txt_d.svg"); margin: 1px 1px 0 0;}
.lead-box .txt-e {width: 12px; height: 12px; background-image: url("../img/lead_txt/txt_e.svg"); background-size: 100% 100%;}
.lead-box .txt-period {width: 4px; height: 4px; background-image: url("../img/lead_txt/txt_period.svg"); margin: 13px 8px 0 1px;}
.lead-box .txt-f-big {width: 12px; height: 17px; background-image: url("../img/lead_txt/txt_f_big.svg"); margin: 0;}
.lead-box .txt-l {width: 4px; height: 17px; background-image: url("../img/lead_txt/txt_l.svg"); margin: 0 1px 0 0;}
.lead-box .txt-n {width: 11px; height: 12px; background-image: url("../img/lead_txt/txt_n.svg"); margin-right: 2px;}
.lead-box .txt-t {width: 8px; height: 16px; background-image: url("../img/lead_txt/txt_t.svg"); margin: 1px 0 0;}
.lead-box .txt-f {width: 8px; height: 17px; background-image: url("../img/lead_txt/txt_f.svg"); margin: 0 1px 0 0;}
.lead-box .txt-x {width: 12px; height: 16px; background-image: url("../img/lead_txt/txt_x.svg"); margin: 3px 0 0;}
.lead-box .txt-c {width: 12px; height: 16px; background-image: url("../img/lead_txt/txt_c.svg"); margin: 3px 0 0;}
.lead-box .txt-hyphen {width: 17px; height: 3px; background-image: url("../img/lead_txt/txt_hyphen.svg"); margin: 9px 6px 0 1px;}
.lead-box .txt-i-big {width: 4px; height: 17px; background-image: url("../img/lead_txt/txt_i_big.svg"); margin: 0 1px 0 0;}
.lead-box .txt-y {width: 13px; height: 17px; background-image: url("../img/lead_txt/txt_y.svg");}
.lead-box .txt-v {width: 12px; height: 12px; background-image: url("../img/lead_txt/txt_v.svg");}
.lead-box .txt-m {width: 18px; height: 12px; background-image: url("../img/lead_txt/txt_m.svg"); margin-right: 1px;}
.lead-box .txt-h {width: 12px; height: 17px; background-image: url("../img/lead_txt/txt_h.svg"); margin: 0 1px 0 0;}
.lead-box .txt-j {width: 6px; height: 22px; background-image: url("../img/lead_txt/txt_j.svg"); margin: 0 2px 0 0;}
.lead-box .txt-w {width: 18px; height: 12px; background-image: url("../img/lead_txt/txt_w.svg");}
.lead-box .txt-w-big {width: 22px; height: 17px; background-image: url("../img/lead_txt/txt_w_big.svg"); margin: 0 -1px 0 -2px;}
.lead-box .txt-b {width: 12px; height: 17px; background-image: url("../img/lead_txt/txt_b.svg"); margin: 0 1px 0 0;}
.lead-box .txt-p {width: 12px; height: 16px; background-image: url("../img/lead_txt/txt_p.svg");}
.lead-box .txt-comma {width: 4px; height: 7px; background-image: url("../img/lead_txt/txt_comma.svg"); margin: 13px 7px 0 -2px;}

.lead-box .lead1 .txt-s + .txt-g { margin-left: 7px;}
.lead-box .lead1 .txt-o + .txt-o { margin-left: -1px;}
.lead-box .lead1 .txt-o + .txt-d { margin-left: -1px;}
.lead-box .lead1 .txt-d + .txt-i { margin-left: 6px;}
.lead-box .lead1 .txt-i + .txt-d { margin-left: -1px;}
.lead-box .lead1 .txt-e + .txt-e { margin-left: 0;}
.lead-box .lead1 .txt-e + .txt-l { margin-left: 1px;}
.lead-box .lead1 .txt-i + .txt-n { margin-left: 1px;}
.lead-box .lead1 .txt-g + .txt-r { margin-left: 5px;}
.lead-box .lead1 .txt-u + .txt-l { margin-left: 1px;}
.lead-box .lead1 .txt-l + .txt-a { margin-left: 6px;}
.lead-box .lead1 .txt-n + .txt-d { margin-left: -1px;}
.lead-box .lead1 .txt-n + .txt-d + .txt-e { margin-left: 6px;}
.lead-box .lead1 .txt-i + .txt-t { margin-left: -1px;}
.lead-box .lead1 .txt-i-big  + .txt-d + .txt-e + .txt-a + .txt-s { margin-left: -1px; margin-right: 8px;}
.lead-box .lead1 .txt-d + .txt-s { margin-left: 6px;}
.lead-box .lead1 .txt-s + .txt-n { margin-left: 8px;}
.lead-box .lead1 .txt-c + .txt-e { margin-left: 1px;}
.lead-box .lead1 .txt-s + .txt-s { margin-left: 1px; margin-right: 1px;}
.lead-box .lead1 .txt-y + .txt-t { margin-left: 5px;}
.lead-box .lead1 .txt-o + .txt-l { margin-left: 5px;}
.lead-box .lead1 .txt-l + .txt-i + .txt-v +.txt-e + .txt-a { margin-left: 6px;}

.lead-box .lead2 .txt-l + .txt-i { margin-left: 1px;}
.lead-box .lead2 .txt-i + .txt-f + .txt-e { margin-left: -2px; margin-right: 6px;}
.lead-box .lead2 .txt-f + .txt-u { margin-left: -1px; margin-right: 1px;}
.lead-box .lead2 .txt-l + .txt-l { margin-left: 1px; margin-right: 7px;}
.lead-box .lead2 .txt-o { margin-right: 0px;}
.lead-box .lead2 .txt-l +.txt-o + .txt-f { margin-right: 7px;}
.lead-box .lead2 .txt-o + .txt-r { margin-left: 1px;}
.lead-box .lead2 .txt-r +.txt-e + .txt-t { margin-left: 6px; margin-right: 1px;}
.lead-box .lead2 .txt-n + .txt-j { margin-left: 4px; margin-right: 2px;}
.lead-box .lead2 .txt-t + .txt-s { margin-left: 6px; margin-right: 0px;}
.lead-box .lead2 .txt-t + .txt-n { margin-left: 1px; margin-right: 1px;}
.lead-box .lead2 .txt-e + .txt-e { margin-left: 1px; margin-right: 0px;}
.lead-box .lead2 .txt-e + .txt-s { margin-left: 1px; margin-right: 0px;}
.lead-box .lead2 .txt-e + .txt-o { margin-left: 7px; margin-right: 0px;}
.lead-box .lead2 .txt-f + .txt-f { margin-left: -1px; margin-right: -1px;}
.lead-box .lead2 .txt-r + .txt-i { margin-left: 7px; margin-right: 0px;}
.lead-box .lead2 .txt-i + .txt-t { margin-left: 1px; margin-right: 0px;}
.lead-box .lead2 .txt-i + .txt-t + .txt-e { margin-left: 1px; margin-right: 0px;}
.lead-box .lead2 .txt-m + .txt-s + .txt-t { margin-left: 6px; margin-right: 0px;}
.lead-box .lead2 .txt-g { margin-left: 7px;}
.lead-box .lead2 .txt-g + .txt-i { margin-left: 0px; margin-right: 0px;}
.lead-box .lead2 .txt-v + .txt-e { margin-right: 5px;}
.lead-box .lead2 .txt-y + .txt-o { margin-right: 1px;}
.lead-box .lead2 .txt-y + .txt-o + .txt-u { margin-right: 7px;}
.lead-box .lead2 .txt-o + .txt-t { margin-right: 1px;}
.lead-box .lead2 .txt-h + .txt-t { margin-left: 5px; margin-right: 1px;}
.lead-box .lead2 .txt-e + .txt-p { margin-left: 6px; margin-right: 1px;}
.lead-box .lead2 .txt-e + .txt-a { margin-left: 1px; margin-right: 1px;}
.lead-box .lead2 .txt-e + .txt-o + .txt-f + .txt-m { margin-left: 6px; margin-right: 2px;}
.lead-box .lead2 .txt-d:last-child { margin-left: -1px;}

.lead-box .lead3 .txt-o + .txt-l { margin-left: 5px; margin-right: 1px;}
.lead-box .lead3 .txt-e + .txt-y { margin-left: 5px; margin-right: 0px;}
.lead-box .lead3 .txt-e + .txt-y + .txt-o { margin-right: 1px;}
.lead-box .lead3 .txt-r + .txt-o { margin-left: 7px; margin-right: 0px;}
.lead-box .lead3 .txt-w + .txt-n { margin-left: 1px; margin-right: 7px;}
.lead-box .lead3 .txt-a + .txt-y { margin-left: -2px;  margin-right: 1px;}
.lead-box .lead3 .txt-a + .txt-n + .txt-d { margin-left: -1px; margin-right: 6px;}
.lead-box .lead3 .txt-f + .txt-r { margin-left: -1px; margin-right: 0px;}
.lead-box .lead3 .txt-s + .txt-h { margin-left: 1px; margin-right: 1px;}
.lead-box .lead3 .txt-h + .txt-n + .txt-e { margin-left: -1px; margin-right: 0px;}
.lead-box .lead3 .txt-s + .txt-s { margin-left: 1px; margin-right: 7px;}
.lead-box .lead3 .txt-t + .txt-o + .txt-f { margin-left: 5px; margin-right: 1px;}
.lead-box .lead3 .txt-l + .txt-l { margin-left: 1px; margin-right: 5px;}
.lead-box .lead3 .txt-r + .txt-d { margin-left: 5px; margin-right: 1px;}
.lead-box .lead3 .txt-y + .txt-s { margin-left: -1px; margin-right: 6px;}
.lead-box .lead3 .txt-h + .txt-s { margin-left: 6px; margin-right: 0px;}
.lead-box .lead3 .txt-s + .txt-t { margin-right: 1px;}
.lead-box .lead3 .txt-a + .txt-t { margin-left: -1px;}

/* ---------------------------------------------------------
header
----------------------------------------------------------*/
header {
  display: flex;
  justify-content: space-between;
  padding: 30px 52px 0 33px;
  margin: 0 auto;
}
header #logo {
  width: 126px;
}
header .btn-all {
  position: relative;
  width: 104px;
  padding-top: 3px;
}
header .btn-all a::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 0;
  display: block;
  width: 105px;
  height: 42px;
  background: url("../img/common/btn_all_looks_on.svg") no-repeat;
  background-size: 105px 42px;
  opacity: 0;
  transition: opacity .3s;
}
header .btn-all a img {
  width: 105px;
  height: 42px;
  transition: opacity .3s;
}
header .btn-all a:hover img {
  opacity: 0;
}
header .btn-all a:hover::after {
  opacity: 1;
}

/* ---------------------------------------------------------
section
----------------------------------------------------------*/
section {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: calc(1160 / 1366 * 100%);
  margin: 50px auto 0;
}
.num {
  position: absolute;
  top: 14px;
  left: 9px;
}
.num img {
  height: 26px;
  width: auto;
}
.pic1 {
  width: calc(339 / 1160 * 100%);
  margin-bottom: calc(40 / 1160 * 100%);
}
.pic2 {
  width: calc(191 / 1160 * 100%);
  margin: 0 calc(20 / 1160 * 100%) 0 calc(40 / 1160 * 100%);
}
.pic3 {
  width: calc(191 / 1160 * 100%);
}
.pic4 {
  width: calc(339 / 1160 * 100%);
  margin: 0 0 0 calc(40 / 1160 * 100%);
}
.pic5,
.pic6,
.pic7,
.pic8 {
  width: calc(191 / 1160 * 100%);
}
.pic5 {  
  margin: 0 calc(20 / 1160 * 100%) 0 calc(168 / 1160 * 100%);
}
.pic6 {
  width: calc(339 / 1160 * 100%);
}
.pic7 {
  width: calc(191 / 1160 * 100%);
  margin: 0 calc(20 / 1160 * 100%) 0 calc(40 / 1160 * 100%);
}
.pic8 {
  width: calc(191 / 1160 * 100%);
}

.ie11 section {
  width: calc(1162 / 1366 * 100%);
}
.ie11 .pic4 {
  margin: 0 0 0 calc(38 / 1160 * 100%);
}
.ie11 .pic7 {
  margin: 0 calc(18 / 1160 * 100%) 0 calc(40 / 1160 * 100%);
}

h2 {
  width: 355px;
  padding-top: calc(45 / 1160 * 100%);
  margin-left: calc(-63 / 1160 * 100%);
}
section a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
section a:hover .thumb img {
  transform: rotate(180deg);
}
section a > div {
  display: block;
}
section a .thumb {
  transform-origin: center;
  transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1);
}
section a:hover .thumb {
  transform: scale(1.04);
}

/* ---------------------------------------------------------
media queries
----------------------------------------------------------*/
@media screen and (max-width:768px) {
  /* ---------------------------------------------------------
  common
  ----------------------------------------------------------*/
  body {
    min-width: 100%;
  }
  .show-pc {
    display: none;
  }
  .show-sp {
    display: block;
  }
  
/* ---------------------------------------------------------
main sp
----------------------------------------------------------*/
  h1 {
    left: 0;
    height: calc(49 / 750 * 100vw);
    margin: calc(-27 / 750 * 100vw) 0 0 calc(91 / 750 * 100vw);
  }
  h1 span {
    height: calc(49 / 750 * 100vw);
    transform: translateY(6.5vw);
  }
  h1 .ttl1 { width: calc(44 / 750 * 100vw); margin-right: calc(2 / 750 * 100vw);}
  h1 .ttl2 { width: calc(47 / 750 * 100vw); margin-right: calc(4 / 750 * 100vw);}
  h1 .ttl3 { width: calc(34 / 750 * 100vw); height: calc(47 / 750 * 100vw); margin-right: calc(-1 / 750 * 100vw);}
  h1 .ttl4 { width: calc(47 / 750 * 100vw); margin-right: calc(3 / 750 * 100vw);}
  h1 .ttl5 { width: calc(40 / 750 * 100vw); height: calc(47 / 750 * 100vw); margin-right: calc(11 / 750 * 100vw);}
  h1 .ttl6 { width: calc(46 / 750 * 100vw); height: calc(47 / 750 * 100vw); margin-right: calc(-4 / 750 * 100vw);}
  h1 .ttl7 { width: calc(47 / 750 * 100vw); margin-right: calc(3 / 750 * 100vw);}
  h1 .ttl8 { width: calc(40 / 750 * 100vw); height: calc(48 / 750 * 100vw); margin-right: calc(6 / 750 * 100vw); margin-top: calc(1 / 750 * 100vw);}
  h1 .ttl9 { width: calc(41 / 750 * 100vw); height: calc(47 / 750 * 100vw); margin-right: calc(16 / 750 * 100vw);}
  h1 .ttl10 { width: calc(34 / 750 * 100vw); height: calc(47 / 750 * 100vw); margin-right: calc(2 / 750 * 100vw);}
  h1 .ttl11 { width: calc(10 / 750 * 100vw); height: calc(47 / 750 * 100vw); margin-right: calc(6 / 750 * 100vw);}
  h1 .ttl12 { width: calc(34 / 750 * 100vw); height: calc(47 / 750 * 100vw); margin-right: calc(2 / 750 * 100vw);}
  h1 .ttl13 { width: calc(36 / 750 * 100vw); height: calc(47 / 750 * 100vw); margin-right: calc(5 / 750 * 100vw);}
  h1 .ttl14 { width: calc(11 / 750 * 100vw); height: calc(47 / 750 * 100vw);}

  .lead-box-sp > span {
    display: flex;
    height: 9px;
    overflow: hidden;
    margin-left: calc(91 / 750 * 100vw);
  }
  .lead-box-sp {
    position: absolute;
    top: 50%;
  }
  
  .lead-box-sp span span {
    display: block;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 2px;
    transform: translateY(9px);
    transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .lead-box-sp span span.is-show {
    transform: translateY(0);
  }
  
  .lead1-sp {
    margin-top: calc(47 / 750 * 100vw);
  }
  .lead2-sp {
    margin-top: 2px;
  }
  .lead3-sp {
    margin-top: 2px;
  }
  .lead4-sp {
    margin-top: 2px;
  }

  .lead-box-sp .txt-v-big { width: 7px; height: 7px; background-image: url("../img/lead_txt/txt_v_big.svg"); margin: 0 -1px 0 0;}
  .lead-box-sp .txt-a { width: 5px; height: 5px; background-image: url("../img/lead_txt/txt_a.svg"); margin-right: 0;}
  .lead-box-sp .txt-r { width: 4px; height: 5px; background-image: url("../img/lead_txt/txt_r.svg");}
  .lead-box-sp .txt-i { width: 2px; height: 7px; background-image: url("../img/lead_txt/txt_i.svg"); margin: 0 0 0 0;}
  .lead-box-sp .txt-o { width: 6px; height: 5px; background-image: url("../img/lead_txt/txt_o.svg"); margin-right: 0;}
  .lead-box-sp .txt-u { width: 5px; height: 5px; background-image: url("../img/lead_txt/txt_u.svg"); margin-right: 0;}
  .lead-box-sp .txt-s { width: 5px; height: 5px; background-image: url("../img/lead_txt/txt_s.svg");}
  .lead-box-sp .txt-g { width: 5px; height: 7px; background-image: url("../img/lead_txt/txt_g.svg"); margin-right: 0;}
  .lead-box-sp .txt-d { width: 5px; height: 7px; background-image: url("../img/lead_txt/txt_d.svg"); margin: 0;}
  .lead-box-sp .txt-e { width: 5px; height: 5px; background-image: url("../img/lead_txt/txt_e.svg"); background-size: 100% 100%;}
  .lead-box-sp .txt-period { width: 2px; height: 1px; background-image: url("../img/lead_txt/txt_period.svg"); margin: 6px 3px 0 0;}
  .lead-box-sp .txt-f-big { width: 5px; height: 7px; background-image: url("../img/lead_txt/txt_f_big.svg"); margin: 0;}
  .lead-box-sp .txt-l { width: 2px; height: 7px; background-image: url("../img/lead_txt/txt_l.svg"); margin: 0 1px 0 0;}
  .lead-box-sp .txt-n { width: 5px; height: 5px; background-image: url("../img/lead_txt/txt_n.svg"); margin-right: 0;}
  .lead-box-sp .txt-t { width: 4px; height: 6px; background-image: url("../img/lead_txt/txt_t.svg"); margin: 1px 0 0;}
  .lead-box-sp .txt-f { width: 3px; height: 7px; background-image: url("../img/lead_txt/txt_f.svg"); margin: 0;}
  .lead-box-sp .txt-x { width: 5px; height: 5px; background-image: url("../img/lead_txt/txt_x.svg"); margin: 2px 0 0;}
  .lead-box-sp .txt-c { width: 5px; height: 5px; background-image: url("../img/lead_txt/txt_c.svg"); margin: 2px 0 0;}
  .lead-box-sp .txt-hyphen {width: 9px; height: 3px; background-image: url("../img/lead_txt/txt_hyphen.svg"); margin: 4px 3px 0 1px;}
  .lead-box-sp .txt-i-big {width: 2px; height: 9px; background-image: url("../img/lead_txt/txt_i_big.svg"); margin: 0 1px 0 0;}
  .lead-box-sp .txt-y { width: 5px; height: 7px; background-image: url("../img/lead_txt/txt_y.svg");}
  .lead-box-sp .txt-v { width: 5px; height: 5px; background-image: url("../img/lead_txt/txt_v.svg");}
  .lead-box-sp .txt-m { width: 8px; height: 5px; background-image: url("../img/lead_txt/txt_m.svg"); margin: 2px 1px 0 0;}
  .lead-box-sp .txt-h {width: 5px; height: 7px; background-image: url("../img/lead_txt/txt_h.svg"); margin: 0 0 0 0;}
  .lead-box-sp .txt-j {width: 3px; height: 9px; background-image: url("../img/lead_txt/txt_j.svg"); margin: 0 0 0 0;}
  .lead-box-sp .txt-w {width: 8px; height: 5px; background-image: url("../img/lead_txt/txt_w.svg");}
  .lead-box-sp .txt-w-big {width: 9px; height: 7px; background-image: url("../img/lead_txt/txt_w_big.svg"); margin: 0 0 0;}
  .lead-box-sp .txt-b {width: 5px; height: 7px; background-image: url("../img/lead_txt/txt_b.svg"); margin: 0 1px 0 0;}
  .lead-box-sp .txt-p {width: 5px; height: 7px; background-image: url("../img/lead_txt/txt_p.svg");}
  .lead-box-sp .txt-comma {width: 2px; height: 3px; background-image: url("../img/lead_txt/txt_comma.svg"); margin: 5px 3px 0 -1px;}

  .lead1-sp .txt-s + .txt-g { margin-left: 2px;}
  .lead1-sp .txt-d + .txt-i { margin-left: 3px; margin-right: 1px;}
  .lead1-sp .txt-d + .txt-e { margin-left: 1px;}
  .lead1-sp .txt-i + .txt-n { margin-left: 1px;}
  .lead1-sp .txt-o + .txt-o { margin-left: -1px;}
  .lead1-sp .txt-g + .txt-r { margin-left: 3px;}
  .lead1-sp .txt-l + .txt-a { margin-left: 1px;}
  .lead1-sp .txt-n + .txt-d + .txt-e { margin-left: 3px;}

  .lead2-sp .txt-s + .txt-t { margin-left: -1px;}
  .lead2-sp .txt-l + .txt-e { margin-left: -1px;}
  .lead2-sp .txt-s + .txt-n { margin-left: 3px;}
  .lead2-sp .txt-y + .txt-t { margin-left: 3px; margin-right: -1px;}
  .lead2-sp .txt-o + .txt-l { margin-left: 2px;}
  .lead2-sp .txt-e + .txt-a { margin-left: 2px; margin-right: 2px;}
  .lead2-sp .txt-e + .txt-f { margin-left: 2px;}
  .lead2-sp .txt-u + .txt-l { margin-left: 1px; margin-right: 0;}
  .lead2-sp .txt-l + .txt-o { margin-left: 1px;}
  .lead2-sp .txt-f + .txt-m { margin-left: 2px; margin-right: 0;}
  .lead2-sp .txt-r + .txt-e + .txt-t { margin-left: 2px;}
  .lead2-sp .txt-n + .txt-j { margin-left: 3px;}
  .lead2-sp .txt-t + .txt-s { margin-left: 2px;}
  .lead2-sp .txt-u + .txt-s + .txt-t { margin-left: 0px;}

  .lead3-sp .txt-e + .txt-o { margin-left: 2px;}
  .lead3-sp .txt-r + .txt-i { margin-left: 2px;}
  .lead3-sp .txt-t + .txt-e { margin-left: 0px;}
  .lead3-sp .txt-m + .txt-s { margin-left: -1px; margin-right: 1px;}
  .lead3-sp .txt-o + .txt-g { margin-left: 2px; margin-right: 1px;}
  .lead3-sp .txt-e + .txt-y { margin-left: 2px;}
  .lead3-sp .txt-u + .txt-b { margin-left: 3px;}
  .lead3-sp .txt-b + .txt-o { margin-left: -1px;}
  .lead3-sp .txt-o + .txt-t { margin-left: -1px;}
  .lead3-sp .txt-h + .txt-t { margin-left: 2px;}
  .lead3-sp .txt-e + .txt-p { margin-left: 3px;}
  .lead3-sp .txt-f + .txt-m { margin-left: 3px; margin-right: 0;}
  .lead3-sp .txt-i + .txt-n { margin-left: 1px;}
  .lead3-sp .txt-d + .txt-t { margin-left: 2px;}
  .lead3-sp .txt-o + .txt-l { margin-left: 2px;}

  .lead4-sp .txt-y + .txt-o { margin-left: -1px;}
  .lead4-sp .txt-u + .txt-r { margin-left: 1px; margin-right: 1px;}
  .lead4-sp .txt-o + .txt-w { margin-left: -1px;}
  .lead4-sp .txt-n + .txt-w { margin-left: 2px;}
  .lead4-sp .txt-n + .txt-d { margin-left: 1px; margin-right: 2px;}
  .lead4-sp .txt-h + .txt-n { margin-left: 1px;}
  .lead4-sp .txt-s + .txt-s + .txt-t { margin-left: 2px;}
  .lead4-sp .txt-o + .txt-f { margin-left: 2px; margin-right: 1px;}
  .lead4-sp .txt-i + .txt-l { margin-left: 1px;}
  .lead4-sp .txt-s + .txt-w { margin-left: 1px;}
  .lead4-sp .txt-h + .txt-s { margin-left: 2px;}
  .lead4-sp .txt-i + .txt-m { margin-left: 1px; margin-right: 0;}


/* ---------------------------------------------------------
header
----------------------------------------------------------*/
  header {
    padding: calc(46 / 750 * 100vw) calc(33 / 750 * 100vw) 0 calc(35 / 750 * 100vw);
    margin: 0 auto;
  }
  header #logo {
    width: calc(179 / 750 * 100vw);
  }
  header .btn-all {
    width: calc(155 / 750 * 100vw);
    padding-top: calc(8 / 750 * 100vw);
  }
  header .btn-all a::after {
    top: 0;
    width: calc(155 / 750 * 100vw);
    height: calc(58 / 750 * 100vw);
    background-size: calc(155 / 750 * 100vw) calc(58 / 750 * 100vw);
    margin-top: calc(8 / 750 * 100vw)
  }
  header .btn-all a img {
    width: calc(155 / 750 * 100vw);
    height: calc(58 / 750 * 100vw);
  }

/* ---------------------------------------------------------
section
----------------------------------------------------------*/
  section {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: calc(72 / 750 * 100vw) auto 0;
  }
  section div {
    position: relative;
    height: calc(280 / 750 * 100vw);
  }
  .num {
    top: calc(15 / 750 * 100vw);
    left: calc(11 / 750 * 100vw);
  }
  .num img {
    height: calc(30 / 750 * 100vw);
    width: auto;
  }
  .pic1 {
    width: calc(374 / 750 * 100%);
    margin: 0 calc(45 / 750 * 100%) 0 0;
  }
  .pic2 {
    left: auto;
    width: calc(210 / 750 * 100%);
    margin: 0 calc(23 / 750 * 100%) 0 0;
  }
  .pic3 {
    left: auto;
    width: calc(98 / 750 * 100%);
    margin: 0 0 calc(46 / 750 * 100%);
  }
  .pic4 {
    left: auto;
    width: calc(374 / 750 * 100%);
    margin: 0 calc(45 / 750 * 100%) 0 calc(120 / 750 * 100%);
  }
  .pic5 {
    width: calc(210 / 750 * 100%);
    margin: 0 0 calc(46 / 750 * 100%);
  }
  .pic6 {
    width: calc(263 / 750 * 100%);
    margin: 0 calc(44 / 750 * 100%) 0 0;
  }
  .pic7 {
    width: calc(210 / 750 * 100%);
    margin: 0 calc(23 / 750 * 100%) 0 0;
  }
  .pic8 {
    width: calc(210 / 750 * 100%);
  }
  h2 {
    width: calc(424 / 750 * 100vw);
    padding-top: calc(110 / 750 * 100vw);
    margin-left: calc(37 / 750 * 100vw);
  }
}