@charset "UTF-8";
/*
ALL PAGE
 ----------------------------------------------------------------------------------------*/
/*
import
----------------------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/earlyaccess/notosansjp.css');
@font-face {
    font-family:'Ahellya';
    src:url('../font/ahellya.ttf') format('truetype'),
        url("../font/ahellya.eot?")  format('eot'),
        url("../font/ahellya.woff2") format('woff2'),
        url("../font/ahellya.woff")  format('woff');
}
/*
Share Style
↓参照：http://css-happylife.com/archives/2007/0212_0008.php
 */
* {
    margin:0;
    padding:0;
	box-sizing:border-box;
}
body {
    position:relative;
    background:#000 url('../img/share/bg.gif') no-repeat left top;
    font-family:"ＭＳ Ｐゴシック", sans-serif;
    font-size:80%;
}

img {
    border:none;
}
/* h1, h2, h3, h4, h5, h6 {
    font-size:24px;
} */
p, li, dt, dl {
    line-height:1.6;
}
p {
    margin:0 0 1em 0;
}
h1, h2, h3, h4, h5, h6, p, li,time {
    color:#ffffff;
}
li {
    list-style-type:none;
}
/*
Link Color
 */
a {
    color:#ffffff;
    text-decoration:none;
	transition:all .3s ease-in-out;
}
a:visited {
    color:#ffffff;
}
a:hover {
    color:#ffee00;
}
a:active {
    color:#ffffff;
}
/*
↑参照：http://css-happylife.com/archives/2007/0212_0008.php
 */


 /******************************
  Utility
  *****************************/
.u-mt40 {
  margin-top:40px!important;
}
.u-mt56 {
  margin-top:56px!important;
}
.u-mb0 {
  margin-bottom:0!important;
}
.u-mb1em {
  margin-bottom:1em!important;
}
.u-mb12 {
  margin-bottom:12px!important;
}
.u-mb25 {
	margin-bottom: 25px!important;
}
.u-mb32 {
	margin-bottom:32px!important;
}
.u-f16px {
  font-size:16px!important;
  font-weight:normal!important;
}
.u-f24px {
  font-size:24px!important;
  font-weight:400!important;
}
.container-wrap {
    position:relative;
    display:block;
    min-height:100vh;
    background-color:black;
	overflow:hidden;
}
/*
Visual
 */
.visual-wrap {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:block;
    width:100vw;
    height:100vh;
}
/*
Contents
 */
.contents-wrap {
    position:relative;
    display:block;
    max-width:960px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom:100px;
    background-color:transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.contents {
    position:relative;
    display:block;
}
.ahellya {
    font-family:'Ahellya';
}
.btn {
    display:blcok;
    width:180px;
    height:40px;
    margin:0 auto;
    border:1px #FC0017 solid;
}
.img > img {
  width:100%;
  max-width:100%;
  height:auto;
}
/*
 JS Class
  */
.is-noOpacity {opacity:1;}
.is-Open {display:block;}
.is-none {display:none;}
/*
  ナビゲーションドロワー×ハンバーガーメニュー
  */
#navigation {
  width:95%;
  padding:10px;
  border-bottom:3px solid #fff;
  margin: 0 auto 20px;
	font-size:16px;
}
#navigation a, .news ul li a, .photos-list ul li a {
	position:relative;
	display:block;
	padding-left:10px;
  margin-bottom:25px;
	color:#ffffff;
}
#navigation a::before, .photos-list ul li a::before {
	display:block;
	content:"";
	position:absolute;
	top:50%;
	left:0;
	width:5px;
	height:10px;
	margin-top:-5px;
	background:url(../img/share/navi_arr.gif) no-repeat;
	background-position:center center;
	background-size:contain;
}
#navigation ul.sub-menu li{
	padding-left:2em;
}
#navigation li:hover > a, .news ul li a:hover {
	color:#ffee00;
}
#nav-drawer{
  position:relative;
}
/* チェックボックス等は非表示に　*/
.nav-unshown {
  display:none;
}
/* アイコンのスペース */
#nav-open{
  display:inline-block;
  width:30px;
  height:22px;
  vertical-align:middle;
}
/* ハンバーガーアイコンをCSSだけで表示 */
#nav-open span, #nav-open span::before, #nav-open span::after {
  position:absolute;
  display:block;
  content:'';
  height:3px;
  width:25px;
  border-radius:3px;
  background:#fff;
  cursor: pointer;
}
#nav-open span::before {
  bottom:-8px;
}
#nav-open span::after {
  bottom:-16px;
}
/* 閉じる用の薄黒カバー */
#nav-close{
  display:none;/* はじめは隠しておく */
  position:fixed;
  z-index:99;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000;
  opacity:0;
  transition: .3s ease-in-out;
}
/* 中身 */
#nav-content{
  overflow:auto;
  position:fixed;
  top:0;
  left:0;
  z-index:9999;/*最前面に */
  width:90%;/* 右側に隙間を作る(閉じるカバー表示) */
  max-width:330px;/* 最大幅（調整してください） */
  height:100%;
  padding:1em;
  background:#000;/* 背景色 */
  transition: .3s ease-in-out;/* 滑らかに表示 */
  -webkit-transform: translateX(-105%);
  transform:translateX(-105%);/* 左に隠しておく */
}
/* チェックが入ったらもろもろ表示 */
#nav-input:checked ~ #nav-close{
  display:block;/* カバーを表示 */
  opacity:.5;
}
#nav-input:checked ~ #nav-content {
  -webkit-transform:translateX(0%);
  transform:translateX(0%);/* 中身を表示（右へスライド) */
  box-shadow:6px 0 25px rgba(0,0,0, .15);
}
/*******************************************
footer
*******************************************/
#footer {
  width:95%;
  max-width:960px;
  margin:0 auto;
	border-top: 3px solid #fff;
	text-align:right;
}
#footer small.copyright {
  padding-right:5px;
	line-height:2;
	font-size:11px;
	color:#ccc;
}

/*
ENTER PAGE
 ----------------------------------------------------------------------------------------*/
.enter #container {
	width:100%;
	max-width:100%;
}
.enter .contents-wrap {
    min-height:100vh;
    padding-bottom:0;
}
.enter .contents {
  /*指定した要素の親要素のコンテンツ幅に合わせる*/
   height:-webkit-fill-available;
   height:fill-available;
}
.enter-hero {
    position: relative;
    display:block;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center;
    -webkit-background-size:cover;
    background-size:cover;
}
.enter .enter-logo {
    position:absolute;
    top:50%;
    top:50vh;
    left:50%;
    margin-top:-55px;
    margin-left:-152.5px;
}
.enter .btn {
    position:absolute;
    top:60%;
    top:60vh;
    left:50%;
    margin-top:30px;
    margin-left:-90px;
	transition:all .3s ease-in-out;
}
.enter .btn:hover {
    background-color:rgba(30,30,30,.5);
}
.enter .btn:active {
    background-color:rgba(200,200,200,.5);
}
.enter .btn > a {
    display:block;
    width:100%;
    height:100%;
    font-size: 24px;
    text-align: center;
    line-height:40px;
}
/* SVG ANIMATION */
.svg-wrapper {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display:block;
    height:100vh;
    background-color:rgba(0,0,0,1);
    z-index:2;
    -webkit-animation:SHOW 2s ease-in-out 5.5s forwards;
    -o-animation:SHOW 2s ease-in-out 5.5s forwards;
    animation:SHOW 2s ease-in-out 5.5s forwards;
}
.box {
    display:block;
    width:100%;
    max-width:960px;
    height:auto;
    margin:0 auto;
    padding-top:30vh;
}
@media only screen and (max-height: 825px) {
  .box {
      padding-top:20vh;
  }
}
@media only screen and (max-width:480px) and (max-height: 825px) {
  .box {
      padding-top:35vh;
  }
}
svg {
    display:block;
    width:100%;
    height:auto;
    margin-top:0;
    margin-left:auto;
    margin-bottom:0;
    margin-right:auto;
    -webkit-animation:Small 2s ease-in-out 4s forwards;
    -o-animation:Small 2s ease-in-out 4s forwards;
    animation:Small 2s ease-in-out 4s forwards;
}
.circle{
    fill:rgba(255,0,0,0);
    stroke: rgba(255,255,255,1);
    stroke-width:1;
    stroke-dasharray:3000;
    stroke-dashoffset:3000;
    animation:Dash2 4.5s ease-in alternate forwards;
    -webkit-animation:Dash2 4.5s ease-in 0s forwards;
    -o-animation:Dash2 4.5s ease-in 0s forwards;
    animation:Dash2 4.5s ease-in 0s forwards;
}
.path{
    fill:none;
    stroke:#FFFFFF;
    stroke-width:1;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray:3000;
    stroke-dashoffset:3000;
    animation:Dash 3s ease-in alternate forwards;
    -webkit-animation:Dash 3s ease-in 2s forwards;
    -o-animation:Dash 3s ease-in 2s forwards;
    animation:Dash 3s ease-in 2s forwards;
}
/* svg-wrapper animation */
@keyframes SHOW {
    0%{background-color:rgba(0,0,0,1);}
    95%{z-index:2;}
    100% {background-color:rgba(0,0,0,0);z-index:-1;}
}
@-webkit-keyframes SHOW {
    0%{background-color:rgba(0,0,0,1);}
    95%{z-index:2;}
    100% {background-color:rgba(0,0,0,0);z-index:-1;}
}
@-moz-keyframes SHOW {
    0%{background-color:rgba(0,0,0,1);}
    95%{z-index:2;}
    100% {background-color:rgba(0,0,0,0);z-index:-1;}
}
@-o-keyframes SHOW {
    0%{background-color:rgba(0,0,0,1);}
    95%{z-index:2;}
    100% {background-color:rgba(0,0,0,0);z-index:-1;}
}
@-ms-keyframes SHOW {
    0%{background-color:rgba(0,0,0,1);}
    95%{z-index:2;}
    100% {background-color:rgba(0,0,0,0);z-index:-1;}
}
/* SVG animation */
@keyframes Small {
    0%{width:100%;}
    75% {width:100%;margin-top:0;}
    100% {width:0;margin-top:20%;}
}
@-webkit-keyframes Small {
    0%{width:100%;}
    75% {width:100%;margin-top:0;}
    100% {width:0;margin-top:20%;}
}
@-moz-keyframes Small {
    0%{width:100%;}
    75% {width:100%;margin-top:0;}
    100% {width:0;margin-top:20%;}
}
@-o-keyframes Small {
    0%{width:100%;}
    75% {width:100%;margin-top:0;}
    100% {width:0;margin-top:20%;}
}
@-ms-keyframes Small {
    0%{width:100%;}
    75% {width:100%;margin-top:0;}
    100% {width:0;margin-top:20%;}
}

/* PATH ANIMATION */
@keyframes Dash {
    0%{stroke-dashoffset:3000;}
    100% {stroke-dashoffset:0;}
}
@-webkit-keyframes Dash {
    0%{stroke-dashoffset:3000;}
    100% {stroke-dashoffset:0;}
}
@-moz-keyframes Dash {
    0%{stroke-dashoffset:3000;}
    100% {stroke-dashoffset:0;}
}
@-o-keyframes Dash {
    0%{stroke-dashoffset:3000;}
    100% {stroke-dashoffset:0;}
}
@-ms-keyframes Dash {
    0%{stroke-dashoffset:3000;}
    100% {stroke-dashoffset:0;}
}
/* CIRCLE ANIMATION */
@keyframes Dash2 {
    0%{
        stroke-dashoffset:3000;
    }
    90% {
        stroke-dashoffset:0;
        stroke-width:1;
        fill:rgba(255,0,0,0);
    }
    100% {
        fill:rgba(255,0,0,1);
        stroke-width:0;
    }
}
@-webkit-keyframes Dash2 {
    0%{
        stroke-dashoffset:3000;
    }
    90% {
        stroke-dashoffset:0;
        stroke-width:1;
        fill:rgba(255,0,0,0);
    }
    100% {
        fill:rgba(255,0,0,1);
        stroke-width:0;
    }
}
@-moz-keyframes Dash2 {
    0%{
        stroke-dashoffset:3000;
    }
    90% {
        stroke-dashoffset:0;
        stroke-width:1;
        fill:rgba(255,0,0,0);
    }
    100% {
        fill:rgba(255,0,0,1);
        stroke-width:0;
    }
}
@-o-keyframes Dash2 {
    0%{
        stroke-dashoffset:3000;
    }
    90% {
        stroke-dashoffset:0;
        stroke-width:1;
        fill:rgba(255,0,0,0);
    }
    100% {
        fill:rgba(255,0,0,1);
        stroke-width:0;
    }
}
@-ms-keyframes Dash2 {
    0%{
        stroke-dashoffset:3000;
    }
    90% {
        stroke-dashoffset:0;
        stroke-width:1;
        fill:rgba(255,0,0,0);
    }
    100% {
        fill:rgba(255,0,0,1);
        stroke-width:0;
    }
}
/*
TOP PAGE
 ----------------------------------------------------------------------------------------*/
#header {
	display:-webkit-flex;
	display:flex;
	flex-flow: column;
	width:95%;
	height:50px;
	margin:10px auto;
}
#header a {
  color:#ffffff;
}
#header >h1, #header > p {
	display:block;
	width:100%;
	vertical-align:baseline;
}
#header > h1 {
	margin:0 0 10px 0;
}
#header > p {
	margin:0;
}
.container-wrap-wrap {
	width:100%;
	margin:0 auto;
}
#container {
	width:95%;
	margin:0 auto;
}
.hero {
  opacity:0;
	width:100%;
	height:400px;
	margin:0 auto;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}
.top-contents {
	display:-webkit-flex;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	flex-direction:column;
}
.tcBox {
	display:block;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0;
	padding:60px 30px;
}
.intro {
  opacity:0;
	background:#ffffff;
	margin-top:-60px;
  -webkit-transform:translateX(105%);
  transform:translateX(105%);
}
.intro > h2, .intro p  {
	color:#000000;
}
.intro p {
  text-indent:1em;
}
.news ul li {
  margin-bottom:25px;
}
.news ul li:last-child {
	margin-bottom: 0;
}
/*
PROFILE PAGE
 ----------------------------------------------------------------------------------------*/
 .scndBox {
   margin-bottom:50px;
 }
 .hero-wrap {
   position:relative;
 }
 .heroTxtBox {
   position:relative;
   margin-top:56px;
   opacity:0;
   -webkit-transform:translateX(105%);
   transform:translateX(105%);
 }
 .ryakureki-wrap {
   display:-webkit-flex;
   display:flex;
   justify-content:space-between;
   flex-direction:column;
 }
 .rightBox {
   display:block;
   width:100%;
   margin-top:10px;
   margin-left:0;
 }
/*
PHOTO PAGE
 ----------------------------------------------------------------------------------------*/
.photos-hero {
  margin-bottom:50px;
}
 .heroTxtBox.photos-sect {
   position:absolute;
   display:block;
   width:105%;
   height:auto;
   left:60px;
   bottom:-20px;
   z-index:80;
   margin-top:0;
   background-color:rgba(245,180,83,1);
   padding:1em;
 }
 .photos-sect-open {
   -webkit-transform:translateX(0)!important;
   transform:translateX(0)!important;
 }
 .photos-list ul li  {
   display:block;
 }
 .photos-list ul li a:hover {
   color:#ffee00;
 }
/*
PHOTO-DETAIL PAGE
 ----------------------------------------------------------------------------------------*/
 .photos-hero-detail {
  margin-bottom:72px;
 }
 [class^="detailBox"] {
   /* background-color:#f8b551; */
   margin-bottom:48px;
 }
 [class^="detailBox"] .detail-txt p {
	 color:#fff;
 }
 .detail-img {
   position:relative;
   width:100%;
   box-sizing:border-box;
 }
.detailBox1 .detail-img > img,
.detailBox2 .detail-img > img {
  display:block;
  max-width:650px;
  width:100%;
  margin:0 auto;
  border:none;
  vertical-align:bottom;
}
.detailBox3 .detail-img > img{
 display:block;
 max-width:650px;
 width:100%;
 margin:0 auto;
 border:none;
}
.detail-txt {
  position:relative;
  padding:5px 15px;
  box-sizing:border-box;
}
/* ModalWindow Compornent */
@keyframes fadeIn {
	0% { opacity: 0;  }
	100% { opacity: 1;  }
}
.modal__window {
  position:absolute;
  z-index:9998;
  background:#fff;
  padding:20px;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:auto;
  height:auto;
  max-width:80%;
  max-height:80%;
  box-sizing:border-box;
}
.modal__image {
  position:relative;
  display:inline-block;
  width:100%;
  height:100%;
}
.modal__image > img {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}
/* Buttons */
button {
  cursor: pointer;
  outline: 0;
}
.modal__close {
  	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC40MTQgN2w0Ljk1LTQuOTVMMTEuOTQ4LjYzOCA3IDUuNTg3IDIuMDUuNjM2LjYzOCAyLjA1IDUuNTg3IDdsLTQuOTUgNC45NSAxLjQxNCAxLjQxM0w3IDguNDEzbDQuOTUgNC45NSAxLjQxMy0xLjQxNEw4LjQxMyA3eiIgZmlsbD0iIzAwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+) no-repeat center center;
  border: 0;
  height: 20px;
  line-height: 20px;
  opacity: .3;
  position: absolute;
  top:2px;
  right: 2px;
  text-indent: -9999px;
  transition: all .2s ease-out;
  width: 1rem;
}
.modal__close:hover {
  opacity: .6;
}
.modal__close:focus{
  border:none;
  outline: 0;
}
.modal-wrapper-wrapper {
  position:relative;
}
.layer {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(255,255,255,0.5);
  z-index:9997;
}
.modal {
  position:fixed;
  z-index:9999;
  top:0;
  left:0;
  right:0;
  bottom:0;
  visibility:hidden;
}
.modal[data-state='open'] {
  visibility:visible;
}
[data-state='open'] .modal__window {
  animation: fadeIn 1.5s forwards;
}
.modal-item a {
  display:block;
}
.modal-item a img {
  width:100%;
  heigth:auto;
  max-width:100%;
}
/* .detail-txt:before {
  position:absolute;
  top:-30px;
  left:50%;
  margin-left:-30px;
  content:"";
  display:block;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
  border-bottom:30px solid #f8b551;
} */
/*
TOPIC PAGE
 ----------------------------------------------------------------------------------------*/
 /* 記事 */
 .kiji h1 {
 	margin-top:0;
 	margin-bottom:10px;
 	font-size:24px;
  font-weight:300;
 }
 .kiji h2 {
    position: relative;
    padding-left:8px;
    padding-bottom: 5px;
    margin-bottom:18px;
    font-size: 22px;
    font-weight:100;
    clear: both;
    border-left:solid 2px #fff;
}
 .kiji p {
 	margin-top:0;
 	margin-bottom:20px;
  font-weight:100;
 }
 /* 概要 */
 .gaiyou a {
 	display:block;
 	color:#000000;
 	text-decoration: none;
  padding:5px 10px;
 }
 .gaiyou a:hover {
 	background-color: rgba(245,180,83,.5);
 }
 .gaiyou h1 {
 	margin-top:0;
 	margin-bottom:0;
 	font-size:20px;
 }
 .gaiyou p {
 	margin:0;
 	font-size:14px;
 }
.kiji-body p {
  text-indent:1em;
}
.kiji-body img {
  width:100%;
  height:auto;
  max-width:650px;
}
/* シェアボタン */
.share {
	margin-top:40px;
	clear: both;
}
.share ul {
	margin:0;
	padding:0;
	list-style: none;
}
.share li a {
	display: block;
	padding:8px 17px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	color: #dddddd;
	font-size:12px;
	text-decoration: none;
}
.share li a:hover {
	background-color: #eeeeee;
}
.share ul:after {
	content: '';
	display: block;
	clear: both;
}
.share li {
	float: left;
	width:auto;
	margin-right: 5px;
}
.share-tw {border:solid 1px #55acee;}
.share-fb {border:solid 1px #3b5998;}
.share-gp {border:solid 1px #dd4b39;}
@media (max-width: 599px) {
	.share span {
		display: inline-block;
		text-indent:-9999px;
	}
	.share li a {
		padding:8px 10px;
	}
}
/* 自作アイコン画像 */
.myicon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  -webkit-background-size: contain;
  background-size: contain;
  background-position: 50% 50%;
  vertical-align:middle;
}
.sns-btn {
	vertical-align: sub;
}
.homeicon {
	background: url("../img/topics/icon-home.svg") no-repeat;
}
.twicon {
	background: url("../img/topics/icon-tw.svg") no-repeat;
}
.fbicon {
	background: url("../img/topics/icon-fb.svg") no-repeat;
}
.penicon {
    background: url('../img/topics/pencil.svg') no-repeat;
}
/*
WORKS PAGE
 ----------------------------------------------------------------------------------------*/
 .heroTxtBox.works-sect {
   position:absolute;
   display:block;
   width:105%;
   height:auto;
   left:60px;
   bottom:-20px;
   z-index:80;
   margin-top:0;
   background-color:rgba(245,180,83,1);
   padding:1em;
 }
 .works-hero {
  margin-bottom:50px;
 }
 .scndBox.works-sect p,
 .scndBox.works-sect ul li,
 .detail-txt p {
	 text-indent:1em;
 }
 .gakkaihappyou ul li{
   margin-bottom:1em;
 }