@charset 'UTF-8';

/*========================================================
▼全体
========================================================*/
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 {
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-size: 100%;
    font-weight: 400;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    background: transparent;
}

p {
    line-height: 1.6;
}

a {
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    text-decoration: none;
    color: #808080;
    background: transparent;
}

ul li {
    list-style: none;
}

img {
    display: block;
    width: 100%;
    max-width: 100%;
}

html {
    font-size: 62.5%;
    height: 100%;
}

@media only screen and (min-width: 769px) {
	html,  body {
		font-weight: 300;
	}
}

body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    color: #444;
    -webkit-text-size-adjust: 100%;
}
@media only screen and (min-width: 769px) {
	.sp {
		display: none!important;
	}
}

@media only screen and (max-width: 768px) {
	.pc {
		display: none!important;
	}
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*========================================================
▼ヘッダー
========================================================*/
header {
    position: relative;
    z-index: 9990;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: calc(41.25px + 1vw);
    margin: 0 auto;
    background-color: #0e0e0e;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header-inner {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: calc(41.25px + 1vw);
    padding: 0 3%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header-inner .logo {
    width: 30vw;
}

/*SNSアイコン*/
.header-inner .sns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header-inner .sns a {
    display: block;
    padding: 0 1em;
    text-align: center;
    color: #fff;
}

.header-inner .sns a:last-of-type {
    padding-right: 0;
}

.header-inner .sns a:hover, .header-inner .logo:hover {
    opacity: .8;
}

.header-inner .sns a i {
    font-size: calc(2rem + 1vw);
    vertical-align: middle;
}

@media only screen and (min-width: 769px) {
	header {
		width: 100%;
		height: 90px;
	}
	.header-inner {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
	}
	
	.header-inner .logo {
		width: 211px;
	}
	
	.header-inner .sns a {
		padding: 0 1.5em;
	}
	
	.header-inner .sns a:hover,  .header-inner .logo:hover {
		opacity: .8;
	}
	
	.header-inner .sns a i {
		font-size: 3.5rem;
		vertical-align: middle;
	}
}

/*========================================================
▼orignal
========================================================*/
/* common
--------------------------------------------------------- */
/* ----- inner ----- */
.inner {
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  max-width: 990px;
  height: 100%;
}
.section:not(.mv) .inner {
  text-align: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.inner * {
  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3";
  font-weight: 500;
}
@media only screen and (min-width: 769px) {
  .inner {
    padding-bottom: 90px;
    padding-top: 135px;
  }
  .inner + .inner {
    padding-top: 0;
  }
}
@media only screen and (max-width: 768px) {
  .inner {
    padding-top: calc(41.25px + 1vw);
  }
  .section--line2 .inner:first-child {
    padding-top: calc(41.25px + 1vw + 20px);
  }
  .section--line2 .inner:last-child {
    padding-top: 20px;
  }
}
/* ----- item ----- */
.item .image {
  width: 100%;
}
.item .image img {
  max-height:100%;
  width: auto;
}
.item .info {
  height: 1em;
  line-height: 1;
  text-align: right;
}
.item--col2 .image,
.item--col3 .image {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
.item--col2 .image figure {
  width: 48%;
}
.item--col2 .image figure:first-child {
  margin-right: 4%;
}
.item--col3 .image figure {
  width: 30%;
}
.item--col3 .image figure:not(:last-child) {
  margin-right: 5%;
}
@media only screen and (min-width: 769px) {
  .item .image img {
    max-height: calc( 100vh - 225px - 22px);
  }
  .item .info  {
    font-size: 1.2em;
    margin-top: 10px;
  }
  .item .info a {
    transition: all .3s;
    text-decoration: transparent;
  }
  .item .info a:hover {
    color: #5d5d5d;
    text-decoration: underline;
  }
  .item--col3 {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media only screen and (max-width: 768px) {
  .item .image img {
    max-height: calc( 100vh - ((41.25px + 1vw)*2) - 20px - 22px - 60px );
  }
  .section--line2 .item--col2 .image img {
    max-height: calc( (100vh - (41.25px + 1vw) - 40px - 20px - 22px - 60px )/2 );
  }
  .item .info  {
    font-size: 1.2em;
    margin-top: 5px;
  }
  .item--col3 {
    padding-left: 15px;
    padding-right: 15px;
  }
  /* 2行 */
  .section--line2 .item--col1 .image {
    margin-left: auto;
    margin-right: auto;
    width: 48%;
  }
  .section--line2 .item--col1 .info {
    margin-left: auto;
    margin-right: auto;
    width: 48%;
  }
}
/* header
--------------------------------------------------------- */
header {
  left: 0;
  position: fixed;
  top: 0;
}
/* main visual
--------------------------------------------------------- */
.mv {
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (min-width: 769px) {
  .mv {
    background-image: url("../images/mv_bg.jpg");
    background-position: 50% 90px;
  }
  .mv .inner h2 {
    margin-left: calc(140/990*100%);
    width: calc( 328/990*100%)
  }
}
@media only screen and (max-width: 768px) {
  .mv {
    background-image: url("../images/mv_bg_sp.jpg");
    background-position: 50% 45px;
  }
  .mv .inner h2 {
    margin-left: calc(40/750*100%);
    width: calc( 390/750*100%)
  }
}
/* lead
--------------------------------------------------------- */
.lead .inner p {
  line-height: 2;
}
@media only screen and (min-width: 769px) {
  .lead .inner p {
    font-size: 2.4em;
  }
}
@media only screen and (max-width: 768px) {
  .lead .inner p {
    font-size: 1.3em;
  }
}
/* setion last
--------------------------------------------------------- */
.section--last .inner {
  display: block;
  position: relative;
  width: 100%;
}
.section--last .inner dl {
  letter-spacing: -.4em;
  text-align: left;
}
.section--last .inner dl dt,
.section--last .inner dl dd {
  display: inline-block;
  letter-spacing: normal;
  vertical-align: top;
}
.section--last .inner dl:nth-child(1) dt {
  width: 7em;
}
.section--last .inner dl:nth-child(2) dt,
.section--last .inner dl:nth-child(3) dt {
  width: 3.5em;
}
.section--last .inner dl:nth-child(4) dt {
  width: 6em;
}
.section--last .inner dl:nth-child(3) dd {
  width: calc(100% - 3.5em);
}
.section--last .inner dl dt::after {
  content: "\003A";
}
.footer-logo {
  text-align: left;
}
.footer-logo a {
  color: #333;
  display: inline-block;
  transition: all .3s;
}
.footer-logo a span {
  display: inline-block;
  text-decoration: underline;
}
@media only screen and (min-width: 769px) {
  .section--last .inner {
    padding-bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
  .section--last .inner dl {
    font-size: 1.2em;
  }
  .section--last .inner dl:not(:first-child) {
    margin-top: 5px;
  }
  .footer-logo {
    width: 178px;
  }
  .footer-logo {
    margin-top: 20px;
  }
  .footer-logo span {
    margin-top: 10px;
  }
  .footer-logo a:hover {
    opacity: .7;
  }
}
@media only screen and (max-width: 768px) {
  .section--last .inner {
    padding-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .footer-logo {
    margin-top: 15px;
  }
  .footer-logo img {
    width: 135px;
  }
  .footer-logo span {
    margin-top: 5px;
  }
}
/* arrow
--------------------------------------------------------- */
.arrow {
  animation: vertical 1s ease-in-out infinite alternate;
  background: url("../images/arrow.png") 0 0/contain no-repeat;
  bottom: 10px;
  height: 8px;
  left: calc(50% - 20px);
  position: fixed;
  width: 39px;
}
@keyframes vertical {
    0% { transform:translateY(-10px); }
  100% { transform:translateY(  0px); }
}
/*========================================================
▼フッター
========================================================*/
footer {
  text-align: center;
}
footer small {
  background: #000;
  color: #fff;
  display: block;
  width: 100%;
}
@media only screen and (min-width: 769px) {
  footer {
    margin-top: 45px;
  }
  footer small {
    font-size: 1.4em;
    line-height: 50px;
  }
}
@media only screen and (max-width: 768px) {
	footer small {
		font-size: 2.6vw;
		line-height: 1.2;
		padding: 10px 0;
	}
}