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


/* デザインA (SP) 728px以下の範囲に収めるデザインはこの中に記述 */
@media screen and (max-width: 728px) {

*{ margin:0; padding:0;}
body { position: relative; top: 0px; font-size: 13px; font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif; 
line-height: 26px; letter-spacing: 0.05em; font-weight:300; }

h1 { font-size: 50px; font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif; 
line-height: 50px; letter-spacing: 0.0em; font-weight:200;}
h2 { font-size: 100%; font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif; font-size: 36px; 
line-height: 26px; letter-spacing: 0.00em; font-weight:100;  display:inline;}

#sen { width:960px; height: 1px; background-color:#EBEBEB; border: none; }
#sen_max { position:absolute; width:100%; height: 1px;  top: 0px; margin-top: 0px ; background-color:#EBEBEB; border: none; z-index:; }

a:link { color:black; transition: 0.3s; text-decoration: none;}
a:visited { color:black; text-decoration: none;}
a:active { opacity:; color:#A0A0A0; }
a:active img { opacity:1; transition:0.3s; /*transform: scale(1.2); 画像の拡大率*/}
a { text-decoration: none; text-decoration: none;}
*:focus { outline: none; }

.gray1 { color: #F8F8F8;}
.gray2 { color: #EBEBEB;}
.gray3 { color: #A0A0A0;}
.underline  { border-bottom:solid; border-color:white; border-width:1px;/*5ピクセルの太さにする*/}



#head160 { width:100%; height: 100px; margin: 0 auto; position: absolute; background-color:;}
#mvlogo { position:fixed; left:30px; top: 36px; width: 45px; height: ; background-color:; z-index:100;}
/*#mvlogo:hover { opacity:0.5; transition:0.3s; }*/
#mvlogo2 { position:fixed; left:30px; top: 36px; width: 45px; height: ; background-color:; z-index:102;}
/*  ヘッダーに押し込むver  #namelogo { position:absolute; width:40%; right:px; margin: auto; top: 0px; background-color:; z-index:99;
 top: 37px; right: 0; bottom: 0; left: 0;}*/
#namelogo { position:relative; width:100%; right:px; margin: auto; top: 0px; background-color:; z-index:99;
 top: 2px;  right: 0; bottom: 0; left:; margin-top: 180px; transform: rotate(0deg);}

#g_navi { width:200px; height:50px; margin: 0 auto; position: absolute; top:50px; right:178px; background-color:;  z-index:1; display:none}
#navi_works { margin-left:0px; margin-top:12px; float:left; }
#navi_about { margin-left: 25px; margin-top:12px; float:left;}
#navi_contact { margin-left: 21px; margin-top:12px; float:left;}
#menu { position: fixed;  width:50px; height: 12px; top:70px; right:90px; background-color:;
border-top:solid 1px black ; border-bottom:solid 1px black; z-index:100;}




/*#black_1 { width:100vw; min-height: 100vh; position:absolute; background-color:black; opacity:0.2; z-index:1;}*/
#main { width:auto; height:; margin: 0 auto; position: relative; background-color:; z-index:0; color:; z-index:2;}
#ph_main { width:; min-height: auto; margin: 0 auto; position: relative; background-color:; z-index:0;}
#main_caption { width:auto; height: 180px; position: relative; padding-left:30px;  bottom:-355px; background-color:; }
#tytle { position: relative; left:-6px; top:5px;}
#tytle_jp { font-size: 42px; font-family: 'ryo-gothic-plusn', '游ゴシック','Yu Gothic', sans-serif; 
line-height: px; letter-spacing: 0.05em; font-weight:100;  position: relative; left:-2px; top:4px;}
#credit_1 { position: relative; left:-2px; top:24px; font-size: 16px; line-height: 24px; letter-spacing: 0.05em; color:#AEAEAE;}
#credit_2 { position: relative; left:px; bottom:10px; font-size: 12px; line-height: 24px; letter-spacing: 0.05em; color:#AEAEAE;}
a.link_cap:link { color:#AEAEAE; transition: 0.3s; text-decoration: none;}
a.link_cap:visited { color:#AEAEAE; text-decoration: none;}
a.link_cap:active { opacity:0.5; color:#AEAEAE; }
.link_cap { border-bottom:solid; border-color:#cccccc; border-width:1px;/*5ピクセルの太さにする*/}

#box_setsumei { width:100%; height: auto; margin: 0 auto; position: relative; background-color:; z-index:;  padding: 0px 30px;}
#allworks { top:15px; margin: 0 auto; position: relative; font-weight:300;}

.setsumei_midashi{ margin: 0 auto; position: relative; text-align:left; padding:280px 0px 25px 0px; z-index:; font-weight:;
font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif;}
.setsumei_text{ width:; height: px; margin: 0 auto; position: relative; padding-bottom:60px; font-size:13px; color:;}
.sen_1 { width:20px; left:0px; position: relative; padding-top:25px; z-index:; border-top:solid 1px #cccccc;}
#box_960 { width:auto; height: auto; margin: 0 auto; position: relative; background-color:; z-index:;}
.image_960{ width:960px; height: auto; position: relative; margin: 0 auto 10px auto; padding: 0px 0px;}
.image_960saigo{ width:960px; height: auto; position: relative; margin: 0 auto; padding: 0px 0px;}
#sen_max_work { position:relative; width:100%; height: 1px;  top: 0px; margin-top: 100px ; background-color:#EBEBEB; border: none; z-index:; }

#allbox { width:100%; height: auto; margin: 0 auto; position: relative; background-color:; z-index:1;}
#box250 { width:; height: 250px; margin: 0 auto; position: relative; margin-top:0px; background-color:; overflow:hidden;}
.btn_box { width:; height: 260px; margin: 0 auto; position: relative; background-color:; text-align:center; overflow:hidden;}
.btn { width:220px; height:60px; top:0px; margin: 100px auto; position: relative; display: inline-block; font-weight: 300; text-align:center; padding-top:16px; text-decoration: none; border: 1px solid; background-color:; overflow:hidden;}
.btn:active { background: black; color: white;  border: 1px solid black; opacity:1; transition: 0.5s;}
.more_migi{ position: absolute; top:17px; right:18px;}
.more_hidari{ position: absolute; top:17px; left:20px;}

#footer_box { width:100%; height: 300px; margin: 0 auto; margin-top:0px; position: relative; 
  background-color:; font-size: 12px; line-height: 20px;}
#footer_navi{  width:200px; height:px; top:150px; font-size: 14px; font-family: 'Montserrat'; letter-spacing: 0.05em; position: absolute; background-color:; right: 0; bottom: 0; left: 0; margin: auto;}
#insta{ position: absolute; margin-left: 55px; bottom: 30px;  font-size: 12px; z-index:;}
#icon_insta{ width:16px; position: absolute; margin-left: 30px; bottom: 32px; z-index:; opacity:0.3;}
#footer_copy{ position: absolute; right: 30px; bottom: 30px; z-index:2;}
#logo2{ width:150px; height:auto; top:100px; margin: 0 auto;  position: relative; }



.menu-trigger,
.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger { position: fixed; right: 30px; top:45px; width: 40px; height: 10px; z-index: 102;}
.menu-trigger span { position: absolute;  left: 0;  width: 100%;  height: 1px;  background-color: black;
  border-radius: px; width: 40px;}
.menu-trigger span:nth-of-type(1) { top: 0; }
.menu-trigger span:nth-of-type(2) { top: 10px; }

.menu-trigger:active { transition-duration: 0.5s;  transform: scaleX(1.1);}

.menu-trigger.active span { background-color: white;}
.menu-trigger.active span:nth-of-type(1),
.menu-trigger.active span:nth-of-type(2) { width: 30px; }
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translate(0px,5px) rotate(-15deg);
  transform: translate(10px,5px) rotate(-45deg); 
}
.menu-trigger.active span:nth-of-type(2) {
  -webkit-transform: translate(0px,-5px) rotate(15deg);
  transform: translate(10px,-5px) rotate(45deg);
}



/*gnav*/
.gnav{
    background: black; display: none;  color:white;
    height: 100%; width: 100%; position: fixed; left: 0px; top:0px;
    z-index: 100; opacity:1; z-index:101;}
.gnav__menu {width:; height:; margin: 0 auto; position: absolute; top: 50%; left: 50%;
transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%);  background-color:;}

.gnav__menu a:{ color:white;}
.gnav__menu a:link { color:white; transition: 0.3s; text-decoration: none;}
.gnav__menu a:visited { color:white; text-decoration: none;}
.gnav__menu a:active { opacity:0.5; transition: 0.5s;}
#g_navi2 { font-size:28px; line-height:90px; font-weight:200; letter-spacing:0.05em;}
#navi_menu { display: inline-block; text-align:center; margin: 0 auto; position: relative; background-color:; }
#insta2{ position: absolute; margin-left: 55px; bottom: 27px;  font-size: 12px; z-index:;}
#icon_insta2{ width:16px; position: absolute; margin-left: 30px; bottom: 32px; z-index:; opacity:0.3;}
#footer_copy2{ position: absolute; right: 30px; bottom: 27px; z-index:2; font-size: 12px;}



.gazou { position: relative; width: 300px; height: 200px; top:20px; margin: 0 auto;
	display: block; border-radius: px; overflow: hidden; cursor: pointer;}
.gazou img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
	width: 100%; display: block; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out;}
.gazou:active img:nth-of-type(2) { opacity: 0;}



.hako {
	overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
	width: 100px;	/*画像の幅*/
	height: auto;	/*画像の高さ*/ background-color:;
}
.hako img {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.hako img:active {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}



}
/* SPここまで */










/* デザインC (PC) 729px以上の範囲に収めるデザインはこの中に記述 */
@media screen and (min-width: 729px) {

*{ margin:0; padding:0;}
body { position: relative; top: 0px; font-size: 13px; font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif; 
line-height: 26px; letter-spacing: 0.05em; font-weight:300; }

h1 { font-size: 60px; font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif; 
line-height: 26px; letter-spacing: 0.0em; font-weight:100;}
h2 { font-size: 100%; font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif; font-size: 36px; 
line-height: 26px; letter-spacing: 0.00em; font-weight:100;  display:inline;}

#sen { width:960px; height: 1px; background-color:#EBEBEB; border: none; }
#sen_max { position:absolute; width:100%; height: 1px;  top: 0px; margin-top: 0px ; background-color:#EBEBEB; border: none; z-index:; }

a:link { color:black; transition: 0.3s; text-decoration: none;}
a:visited { color:black; text-decoration: none;}
a:hover { opacity:; color:#A0A0A0; }
a:hover img { opacity:1; transition:0.3s; /*transform: scale(1.2); 画像の拡大率*/}
a { text-decoration: none; text-decoration: none;}
*:focus { outline: none; }

.gray1 { color: #F8F8F8;}
.gray2 { color: #EBEBEB;}
.gray3 { color: #A0A0A0;}
.underline  { border-bottom:solid; border-color:white; border-width:1px;/*5ピクセルの太さにする*/}



#head160 { width:100%; height: 160px; margin: 0 auto; position: absolute; background-color:;}
#mvlogo { position:fixed; left:90px; top: 55px; width: 60px; height: 40px; background-color:; z-index:100;}
/*#mvlogo:hover { opacity:0.5; transition:0.3s; }*/
#mvlogo2 { position:fixed; left:90px; top: 55px; width: 60px; height: 40px; background-color:; z-index:102;}
#namelogo { position:relative; width:100%; right:px; top: 0.35vw; background-color:; z-index:99; }

#g_navi { width:200px; height:50px; margin: 0 auto; position: absolute; top:50px; right:178px; background-color:;  z-index:1;}
#navi_works { margin-left:0px; margin-top:12px; float:left; }
#navi_about { margin-left: 25px; margin-top:12px; float:left;}
#navi_contact { margin-left: 21px; margin-top:12px; float:left;}
#menu { position: fixed;  width:50px; height: 12px; top:70px; right:90px; background-color:;
border-top:solid 1px black ; border-bottom:solid 1px black; z-index:100;}



#black_1 { width:100vw; min-height: 100vh; position:absolute; background-color:black; opacity:0.2; z-index:1;}
#main { width:100%; height: auto; margin: 0 auto; position: relative; background-color:; z-index:0; color: white;}
#ph_main { width:; min-height: auto; margin: 0 auto; position: relative; background-color:red; z-index:0;}
#main_caption { width:auto; height: 180px; position: absolute; left:90px;  bottom : calc(-100vh + 40px);
 background-color:; z-index:1;}
#tytle { position: relative; left:-6px; top:5px; line-height: 50px;}
#tytle_jp { font-size: 50px; font-family: 'ryo-gothic-plusn', '游ゴシック','Yu Gothic', sans-serif; 
line-height: px; letter-spacing: 0.05em; font-weight:100;  position: relative; left:-2px; top:4px;}

#credit_1 { position: relative; left:px; top:14px; font-size: 16px; line-height: 18px; letter-spacing: 0.05em; font-weight:;}
#credit_2 { position: relative; left:px; bottom:0px; font-size: 12px; line-height: 18px; letter-spacing: 0.05em; color:white;}
a.link_cap:link { color:white; transition: 0.3s; text-decoration: none;}
a.link_cap:visited { color:white; text-decoration: none;}
a.link_cap:hover { opacity:0.5; color:white; }
.link_cap { border-bottom:solid; border-color:white; border-width:1px;/*5ピクセルの太さにする*/}

#box_setsumei { max-width:600px; height: auto; margin: 0 auto; position: relative; background-color:; z-index:;}
#allworks { top:15px; margin: 0 auto; position: relative; font-weight:300;}

.setsumei_midashi{ margin: 0 auto; position: relative; text-align: center; padding:120px 0px 25px 0px; z-index:; font-weight:300;}
.setsumei_text{ width:; height: px; margin: 0 auto; position: relative; padding-bottom:120px; font-size:12px;}
.sen_1 { width:20px; margin: 0 auto; position: relative; padding-top:25px; z-index:; border-top:solid 1px #cccccc;}
#box_960 { width:960px; height: auto; margin: 0 auto; position: relative; background-color:; z-index:;}
.image_960{ width:960px; height: auto; position: relative; margin: 0 auto 50px auto;}
.image_960saigo{ width:960px; height: auto; position: relative; margin: 0 auto;}
#sen_max_work { position:relative; width:100%; height: 1px;  top: 0px; margin-top: 100px ; center; background-color:#EBEBEB; border: none; z-index:; }


#box250 { width:400px; height: 250px; margin: 0 auto; position: relative; margin-top:0px; background-color:;}
.btn_box { width:px; height: 260px; margin: 0 auto; position: relative; background-color:; text-align:center;}
.btn { width:300px; height:60px; top:0px; margin: 100px auto; position: relative; display: inline-block; font-weight: 300; text-align:center; padding-top:16px; text-decoration: none; border: 1px solid; background-color:;}
.btn:hover { background: black; color: white;  border: 1px solid black; opacity:1; transition: 0.5s;}
.more_migi{ position: absolute; top:17px; right:18px;}
.more_hidari{ position: absolute; top:17px; left:20px;}

#footer_box { width:100%; height: 400px; margin: 0 auto; margin-top:0px; position: relative; 
  background-color:; font-size: 12px; line-height: 20px;}
#footer_navi{ position: absolute; margin-left: 90px; top:150px; font-size: 14px; font-family: 'Montserrat'; line-height: px; letter-spacing: 0.05em; font-weight:;}
#insta{ position: absolute; margin-left: 115px; bottom: 150px;  font-size: 12px; z-index:;}
#icon_insta{ width:16px; position: absolute; margin-left: 90px; bottom: 152px; z-index:; opacity:0.3;}
#footer_copy{ position: absolute; right: 90px; bottom: 150px; z-index:2;}
#logo2{ width:150px; height:auto; top:158px; margin: 0 auto; margin-right:90px; position: relative; }



.menu-trigger,
.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger { position: fixed; right: 90px; top:69px; width: 40px; height: 10px; z-index: 102;}
.menu-trigger span { position: absolute;  left: 0;  width: 100%;  height: 1px;  background-color: black;
  border-radius: px; width: 40px;}
.menu-trigger span:nth-of-type(1) { top: 0; }
.menu-trigger span:nth-of-type(2) { top: 10px; }

.menu-trigger:hover { transition-duration: 0.5s;  transform: scaleX(1.1);}

.menu-trigger.active span { background-color: white;}
.menu-trigger.active span:nth-of-type(1),
.menu-trigger.active span:nth-of-type(2) { width: 30px; }
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translate(0px,5px) rotate(-15deg);
  transform: translate(10px,5px) rotate(-45deg); 
}
.menu-trigger.active span:nth-of-type(2) {
  -webkit-transform: translate(0px,-5px) rotate(15deg);
  transform: translate(10px,-5px) rotate(45deg);
}



/*gnav*/
.gnav{
    background: black; display: none;  color:white;
    height: 100%; width: 100%; position: fixed; left: 0px; top:0px;
    z-index: 100; opacity:1; z-index:101;}
.gnav__menu {width:; height:; margin: 0 auto; position: absolute; top: 50%; left: 50%;
transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%);  background-color:;}

.gnav__menu a:{ color:white;}
.gnav__menu a:link { color:white; transition: 0.3s; text-decoration: none;}
.gnav__menu a:visited { color:white; text-decoration: none;}
.gnav__menu a:hover { opacity:0.5; transition: 0.5s;}
#g_navi2 { font-size:28px; line-height:70px; font-weight:200; letter-spacing:0.05em;}
#navi_menu { display: inline-block; text-align:center; margin: 0 auto; position: relative; background-color:; }
#insta2{ position: absolute; margin-left: 115px; bottom: 55px;  font-size: 12px; z-index:;}
#icon_insta2{ width:16px; position: absolute; margin-left: 90px; bottom: 60px; z-index:; opacity:0.3;}
#footer_copy2{ position: absolute; right: 90px; bottom: 55px; z-index:2;}



.gazou { position: relative; width: 300px; height: 200px; top:20px; margin: 0 auto;
	display: block; border-radius: px; overflow: hidden; cursor: pointer;}
.gazou img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
	width: 100%; display: block; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out;}
.gazou:hover img:nth-of-type(2) { opacity: 0;}



.hako {
	overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
	width: 100px;	/*画像の幅*/
	height: auto;	/*画像の高さ*/ background-color:;
}
.hako img {
	display: block;
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}
.hako img:hover {
	transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;	/*変化に掛かる時間*/
}



}
/* PCここまで */