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



/* デザインC (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: 100%; font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif; 
line-height: 26px; letter-spacing: 0.05em;}
h2 { font-size: 100%; font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif; font-size: 36px; 
line-height: 26px; letter-spacing: 0.00em; font-weight:200;  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;}



#head160 { width:100%; height: 100px; margin: 0 auto; position: relative; 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: vw; margin-top: 180px; transform: rotate(0deg);}



#tytle{ font-size:60px; font-weight:100;}
#text{ height: auto; margin: 0 auto; position: relative; padding-top:40px; margin-bottom:70px; }
#thanks_text{ height: auto; margin: 0 auto; position: relative; padding-top:20px; padding-bottom:20px; text-align:;}
#tytle_box{ width:100%; height: auto; margin: 0 auto; margin-top:50px;position: relative; background-color:; 
text-align:center;padding:0 30px;}
#tytle_sen { max-width:960px; height: 1px; background-color:#EBEBEB; border: none; margin:50px auto;}



#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;}

.slider_mv { width:auto; height: -webkit-calc(100vw - 0px); height : calc(100vw - 0px); position:relative; margin: 0 auto;  background-color:;}
.slider_mv img { width:auto; height: -webkit-calc(100vw - 0px); height : calc(100vw - 0px);
 object-fit: cover; margin: 0 auto;  position:relative;}
.slider_mv a:hover img { opacity:1; transition: 0.5s;}



#logotype{ position: absolute; width:100%; height: auto;text-align: center; top: px; z-index:2; font-size: 5vw; font-weight:200;}

#about_box { max-width:960px; height: auto; margin:0px auto; padding: 0 30px; margin-top:40px;}
#consept_box { width:100%; height: auto; margin: 0 auto; position: relative; text-align:center; background-color:; z-index:1;}
#concept_en { font-size: 36px; font-family: 'Montserrat'; position:relative; top:60px; letter-spacing: 0.05em; font-weight:200; line-height: 60px; z-index:1;}
#concept_jp { font-family: '游ゴシック'; position:relative; top:80px; letter-spacing: 0.05em; z-index:1;}
#setsumei_box { width:100%; height: auto; margin: 0 auto; position: relative; margin-top:0px; margin-top:120px;  background-color:; z-index:1; margin-bottom:100px; padding: 0px 30px;  font-size:11.5px;}

#box_main { width:100%; height: auto; margin: 0 auto; position: relative; background-color:r; z-index:1; padding:0px 30px;}
.slider_pic {height: auto;background-color:; z-index:; margin: 0 auto; }
.slider_pic img{ width:90%;  margin: 0 auto;}
.box80 { width:90%; height: 80px; margin: 0 auto; position: relative; background-color:;}
.caption_en{ font-size: 24px; position:relative; top:30px;  left:-3px; font-weight:200;}
.category{ font-size: 12px; position:relative; top:36px; left:; font-weight:200; color:#A0A0A0;}

#allworks { top:15px; margin: 0 auto; position: relative; font-weight:300;}


/*.slider_sub img { width:300px; height: 200px; margin: 0 auto;  position:relative; top:20px;}*/
#box960 { width:100%; height: 300px; margin: 0 auto; position: relative; background-color:; text-align:center;}
.box100 { width:; height: 100px; margin: 0 auto; position: relative; background-color:;}

#box_yoko { width:100%; height: 0px; margin: 0 auto; position: relative; background-color:;}
.midashi_pick { font-size: 20px; position:relative; top:-40px;  margin-left:-2px; font-weight:300;}

#grid { width: 100%; max-width: px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(1, 1fr);gap: 20px 0px; background-color:; }
.grid_image { width: 100%; height: auto; background-color:; transition-duration: 0.5s;}
.grid_image:hover { /*opacity:0.7;*/ transform: scale(1.08); transition-duration: 0.5s;}

.caption_grid { font-size: 13px; position:relative; top:6px;  left:-1px; font-weight:300; background-color:;}
.category_grid { font-size: 12px; position:relative; top:2px; left:-1px; font-weight:200; color:#A0A0A0;}
#ph_box  { overflow: hidden;}

#box250 { width:100%; 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_box2 { top:0px; height: 260px; margin: 0 auto; position: relative; background-color:; text-align:center;}
.btn { width:220px; height:60px; top:90px; margin: 0 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;}

#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:hover { 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: 100%; height: 220px; top:px; 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;}
#box990 { width:100%; height:auto; left:px; margin: 0 auto; position: relative; background-color:; padding:0px 30px; 
top:50px;}
.box70 { width:; height: 70px; margin: 0 auto; position: relative; background-color:;  top:8px;}
.slider_sub {width:100%; height:100% ; background-color:; position:relative; top:-20px; z-index:; margin: 0 auto; margin-bottom: 0px; background-color:;}
.caption_en2 { font-size: 13px; position:relative; top:0px;  left:0px; font-weight:300;}
.caption_jp2 { font-size: 12px; position:relative; top:0px;  left:0px; font-weight:300; /**/font-family:'ryo-gothic-plusn';  letter-spacing: 0.1em;}
.category2 { font-size: 12px; position:relative; top:-3px; left:0px; font-weight:200; color:#A0A0A0;}
.box50 { width:; height: 30px; margin: 0 auto; position: relative; background-color:g; display:;}
.tag_new { width:50px; height: 50px; top:-264px; left:15px; margin: 0 auto; position: absolute; background-color:black; font-size: 12px; color:white; border-radius: 50%; z-index:1000; line-height:50px; text-align:center; z-index:10;  display:none;}
.midashi_slide { font-size: 20px; position:relative; top:-30px;  left:-2px; font-weight:300;}



.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;	/*変化に掛かる時間*/
}











.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent; z-index:3; opacity:0.5;
    font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif;  font-weight:100;
}
 
.slick-prev {left: 275px; top:-20px;}
.slick-next {left: 315px; top:-20px;}
 
.slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 18px; line-height: 1;
opacity: 1; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
 
.slick-prev:before { content: '←';  font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif;  font-weight:100;}
.slick-next:before { content: '→';  font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif;  font-weight:100;}
 
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus { color: transparent; outline: none; background: transparent;}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before { opacity: 1;}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before { opacity: 1;}

}










/* デザイン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: 100%; font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif; 
line-height: 26px; letter-spacing: 0.05em;}
h2 { font-size: 100%; font-family: 'Montserrat', '游ゴシック','Yu Gothic', sans-serif; font-size: 36px; 
line-height: 26px; letter-spacing: 0.00em; font-weight:200;  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 ; center; 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;}



#head160 { width:100%; height: 160px; margin: 0 auto; position: relative; 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; }



#tytle{ font-size:60px; font-weight:100;}
#text{ height: auto; margin: 0 auto; position: relative; padding-top:50px;}
#thanks_text{ height: auto; margin: 0 auto; position: relative; padding-top:30px; padding-bottom:20px; text-align:;}
#tytle_box{ max-width:960px; height: auto; margin: 0 auto; margin-top:50px; position: relative; background-color:; text-align:center;}
#tytle_sen { max-width:960px; height: 1px; background-color:#EBEBEB; border: none; margin:100px auto;}
#about_box { max-width:960px; height: auto; margin:0px auto;}

#consept_box { width:100%; height: auto; margin: 0 auto; position: relative; text-align:center; background-color:; z-index:1; margin-top:60px;}
#concept_en { font-size: 36px; font-family: 'Montserrat'; position:relative; top:0px; letter-spacing: 0.05em; font-weight:200; line-height: 60px; z-index:1;}
#concept_jp { font-family: '游ゴシック'; position:relative; top:25px; letter-spacing: 0.05em; z-index:1;}
#box_concept { width:100%; height: 250px; margin: 0 auto; position: relative; margin-top:0px; top:100px;  background-color:; z-index:1;}

#setsumei_box{ width:600px; height:auto; position: relative; font-size:13px; color:; text-align:left; top: 0; right: 0; bottom: 0; left: 0; margin: auto; margin-top:80px; margin-bottom:0px;margin-bottom:100px;font-size: 11px;  background-color:;}

#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;}

#box_main { max-width:100%; height: auto; margin: 0 auto; position: relative; background-color:; z-index:1;}
.caption_en{ font-size: 24px; position:relative; top:30px;  left:-3px; font-weight:200;}
.category{ font-size: 12px; position:relative; top:36px; left:; font-weight:200; color:#A0A0A0;}

#boxfooter { width:960px; height: 400px; margin: 0 auto; position: relative; background-color:;}
.caption_en2 { font-size: 13px; position:relative; top:28px;  left:0px; font-weight:300;}
.caption_jp2 { font-size: 12px; position:relative; top:28px;  left:0px; font-weight:300; /**/font-family:'ryo-gothic-plusn';  letter-spacing: 0.1em;}
.category2 { font-size: 12px; position:relative; top:24px; left:0px; font-weight:200; color:#A0A0A0;}
.tag_new { width:50px; height: 50px; top:-247px; left:140px; margin: 0 auto; position: relative; background-color:black; font-size: 12px; color:white; border-radius: 50%; z-index:1000; line-height:50px; text-align:center; z-index:10; }


.box70 { width:; height: 70px; margin: 0 auto; position: relative; background-color:; top:-20px;}
#grid { max-width: 960px;height:auto; margin: 0 auto; display: grid;
  grid-template-columns: repeat(3, 1fr);gap: 20px 30px; background-color:; }
.grid_image { width: 100%; height: auto; background-color:; transition-duration: 0.5s;}
.grid_image:hover { /*opacity:0.7;*/ transform: scale(1.08); transition-duration: 0.5s;}

.caption_grid { font-size: 13px; position:relative; top:6px;  left:0px; font-weight:300; background-color:;}
.category_grid { font-size: 12px; position:relative; top:2px; left:0px; font-weight:200; color:#A0A0A0;}
#ph_box  { overflow: hidden;}

#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: auto; height: 200px; top:0px; 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ここまで */