* {  
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
	margin:0; 
	padding:0; 
	
	font-family:"Arial","Roboto","游ゴシック", "YuGothic", 'Noto Sans Japanese', "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",sans-serif, Meiryo, メイリオ,Helvetica;	
}
body { 
	width:95%; 
	margin:20px auto; 
	max-width :900px;
}

a:link,a:visited,a:hover,a:active{
	text-decoration:none;
	outline: none;
		color:#000;
}
a:hover{
	color:#000;
}
hr {
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: #FFFFFF;
	margin:0 0 11px 0;
	width:170px;
}
ul {
	list-style: none;
}
img{
	width:100%;
	max-width: 100%;
	
}
article{
	font-size:13px;
	padding:50px 0 0 0;
}
article p{
	padding:3px 0 0 0;
}
article p a{
	border-bottom: 1px solid;
}


/*  */

.inner {
		max-width :900px !important;
    margin: 0 auto;
}
.inner:after {
    content: "";
    clear: both;
    display: block;
}
#bio{
	padding:10px 0 20px 38px;
} 
 
/* header */



/* ヘッダーのコンテナ */
.logo-r {
  display: flex;
  justify-content: center; 
  align-items: center;
  padding: 20px 0 0 0; 
}

/* ロゴと画像コンテナ */
.header-content {
  display: flex;
  align-items: baseline; 

  max-width: 860px; 
  margin: 0 auto;
}

/* ロゴのスタイル */
.logo {
  margin: 0; 
  padding: 0; 
}

/* logo */
.logo-img {
  max-width: 720px; 
  width: 100%;
  height: auto; 
}

/* moist logo */
.header-image {
  width: 120px; 
  height: auto;
  margin-left:20px;
}

 
 
 
 
 
 

/*追加*/
.font-off{
	    font-size: 13px;
    color: #c9c9c9;
}
.font-on{
	    font-size: 13px;
    color: #00d2ff;
}
.box1{
	height:40px;
}
.logo2{
	display:none;
}
.title{
	font: bolder 15px Sans-serif;
		line-height: 3em
}




.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.line{
	text-decoration: underline!important;
}


#sample-box{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 100% 3% 0 10%;
}

#sample-box .sample-inner{
    position: absolute;

    width: 97%;
	bottom:0;
}


.sample-inner p{
	 line-height:18px;
}

.no-change{
	cursor:default!important;
}


/* #pagetop------- */
#pageTop {

  position: fixed;
  bottom: 20px;
  right: 20px;
}
#pageTop a {
  display: block;
  z-index: 999;
  color: #000;
  font-weight: bold;
  text-align: center;
  opacity: 0.3;
	font-size:27px;
}
#pageTop a:hover {
  text-decoration: none;
  opacity: 1;
}
/* #filter
--------------------------- */

.fa{
	    color: #c9c9c9;
}
.fa-instagram:hover{
	    color: #00d2ff!important;
}


 .half{
	     width: 50% !important;
		 padding:0 4px 30px 4px;
		 float:left;
 }
  .half2{
	     width: 33.3% !important;
		 padding:0 4px 30px 4px;
		 float:left;
 }
   .half3{
	     width: 50% !important;
		 padding:0 4px 50px 4px;
		 float:left;
 }
  .half4{ /* new-text-only */
	     width: 50% !important;
		 padding:0 4px 0 4px;
		 float:left;
		 
 }
   .half5{
	     width: 70% !important;
		 padding:0 4px 0 4px;
		 left:15%;
		 position:relative;
		 
 }
    .half6{
	     width: 60% !important;
		 padding:0 4px 0 4px;
		
		 position:relative;
		 
 }
     .half7{
	     width: 50% !important;
		 padding:0 4px 0 4px;
		 left:25%;
		 position:relative;	 
 }
 
 .cb{
	 /* floatを解除 */
  clear: both;
 }
  .half3 li ,  .half3 li p ,.half3  li strong,.half3 li p span{
		color:#ff0000;

 }
 .kom{
	 width:34% !important;
	 margin:0 16% 0 0!important;
 }
  .kom2{
	 width:34% !important;
	 margin:0 16% 0 0!important;
	 		 left:34%;
		 position:relative;
 }
.tag{
	font-size:22px !important;
	color: #e9967a;
	padding:0 0 10px 0;
	text-align: left;
	
 }
li.pa,li.dr,li.ph,li.sc,li.ex,li.an,li.bk,li.go,li.half4,.sample,.exinfo,.swiper-slide,.swiper {
	font-size:11px !important;	
} 
.pa,.dr,.bk,.ph,.sc,.ex,.go {
	padding:0 0 60px 0;
} 
.inf {
	padding:0 0 10px 0;
} 
.half4 {
	padding:0 ;
} 
.dr2,.bk {
	padding:0 4px 60px 4px;
}
.pa img,.dr img,.ph img,.sc img,.ex img,.bk img,.go img,.half4 img,.sample img,.an img {
	padding:0 0 7px 0;
}
.sample{
	margin:0 0 0 0;
}
.white{
	white-space: nowrap;
}

 

 /* -------------slick------------ */

 /* -------------page-link------------ */
 h2[id] {
  display: block;
  height: 0.5rem;
  margin-top: -0.5rem;
  content: "";
}
 /* -------------header_menu------------ */
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
#menu {
  text-align: center;
  background-color:white;
  opacity:0.9;
  font-size:16px;
  font-weight: bold;
  padding: 3px 0 3px 0;
}

#menu  a{
	margin:0 10px 0 0;
}
#menu a:link { text-decoration:none; color: #a8a8a8;}
#menu a:visited { text-decoration:none; color: #a8a8a8;}
#menu a:active { text-decoration:none; color: #a8a8a8;}
#menu a:hover { text-decoration:none; color: #00d2ff;}
 
#menu .active {
    color: #00d2ff;
}
#menu a.active:link { text-decoration:none; color: #00d2ff;}
#menu a.active:visited { text-decoration:none; color: #00d2ff;}
#menu a.active:active { text-decoration:none; color: #00d2ff;}
#menu a.active:hover { text-decoration:none; color: #00d2ff;}
 
 /* -------------iframe------------ */
 .close{
	margin:10px 20px;
	float:right;
}
img.x {
width: 40px;
height: 40px;
} 
.bio{
	padding:10px 0 20px 38px;
} 
.close a{
	font-size:16px;
}
article{
	font-size:13px;
	padding:50px 0 0 0;
}
article.border {
background-color:#f5f5f5;
padding:20px 20px;
}
article p{
	padding:3px 0 0 0;
}
article p a{
	border-bottom: 1px solid;
}
.close{
	float:right;
}
.contact{
padding:50px 5% 50px 5% !important;
height:1000px
}
.bio-smart{
	max-width:100%;
margin: 0 auto!important;
}	

 /* -------------swiper------------ */

.wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-block: 0px;
}

.swiper-pagination, .swiper-pagination2 {
  text-align: right;
  bottom: 0;
}

.swiper-slide img {
  width: 100%;
  max-height: 950px;
  object-fit: contain;
  display: block;
  margin: auto;
}

/* Swiperの矢印ボタンのスタイル */
.swiper-button-next, .swiper-button-prev {
  width: 30px;
  height: 30px;
  color: black !important;
  border-radius: 50%;
  opacity: 0.0 !important;

}

.swiper-button-prev2,
.swiper-button-next2 {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10;
  width: 70px;
  height: 120px;
  color: #000;
  border-radius: 50%;
  opacity: 1 !important;

  background-color: #;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 30px;
}

.swiper-button-prev2 {
  left: 10px;
  opacity: 0.4 !important;
}

.swiper-button-next2 {
  right: 10px;
  opacity: 0.4 !important;
}

.info:hover .swiper-button-prev2,
.info:hover .swiper-button-next2 {
  opacity: 1 !important;
}

.swiper-button-prev2 i,
.swiper-button-next2 i {
  font-size: 18px;
  color: #fff;
}


.swiper-button-prev i.fa-solid,
.swiper-button-next i.fa-solid, 
.swiper-button-prev2 i.fa-solid,
.swiper-button-next2 i.fa-solid {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 0.8 !important;
  font-size: 23px !important;
  color: #000 !important;
  line-height: 120px;
}

.swiper-button-prev2::after,
.swiper-button-next2::after {
  content: none;
}

/* ホバー時の動作 */
.swiper:hover .swiper-button-next,
.swiper:hover .swiper-button-prev {
  opacity: 0.8 !important;
}

.info {
  max-width: 1000px;
  margin: 15px 0 0 0;
  position: relative;
  overflow: hidden;
}

.info .swiper-slide {
  width: auto;
  display: flex;
  justify-content: center;
}

.swiper .swiper-pagination {
  display: flex;
  justify-content: flex-end;
  bottom: 40px;
  padding-right: 0px; 
}

.swiper-button-next::after,
.swiper-button-prev::after {
  content: none !important; 
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10;
  width: 70px;
  height: 120px;
  color: #000;
  border-radius: 50%;
  opacity: 0.5 !important;

  background-color: #;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 30px;
}
/* #responsive-menu------------------------------------------------------- */

#drawer {
  position: relative;
}
.unshown {
  display:none;
}
#open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
  position: fixed;
  right:23px;
  top:30px;
    z-index: 10;
}
#open span, #open span::before, #open span::after {
  position: absolute;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #555;
  display: block;
  content: "";
  cursor: pointer;
  right:0;
}
#open span::before {
  bottom: -8px;
}
#open span::after {
  bottom: -16px;
}
#close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  right:0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

#menu-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right:0;
  z-index: 9999;
  
  max-width: 330px;
  width: 55%;
  height: 100%;
  background: #fff;

  transform: translateX(105%);
}
#input:checked ~ #close {
  display: block;
  opacity: .25;
}
#input:checked ~ #menu-content {
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.res-menu-text{
	text-align: center;
	font-size:20px;
	font-weight: bold;
	padding: 25px 0 0 0;
	display:block;
	line-height:6.5vh;
}


.res-menu-text a{
		display:block;
}
	.res-menu-text a:link { text-decoration:none; color: #a8a8a8;}
	.res-menu-text a:visited { text-decoration:none; color: #a8a8a8;}
	.res-menu-text a:active { text-decoration:none; color: #a8a8a8;}
	.res-menu-text a:hover { text-decoration:none; color: #00d2ff;}
	.res-menu-text .active {color: #00d2ff;}
	.res-menu-text a.active:link { text-decoration:none; color: #00d2ff;}
	.res-menu-text a.active:visited { text-decoration:none; color: #00d2ff;}
	.res-menu-text a.active:active { text-decoration:none; color: #00d2ff;}
	.res-menu-text a.active:hover { text-decoration:none; color: #00d2ff;}

/* -------------mobile-950px---------------------------------------------------------------- */	
@media screen and (min-width:950px) {
  #open {
    display:none;
  }
}
@media screen and (max-width: 950px) {
	#menu{
	display:none;	
	}	
	body { 
	width:97%; 
	margin: 30px auto;
	}
	.logo{
	padding: 0 0 15px 0;
	}
.font-off,.font-on{
	    font-size: 20px;
}	
}
/* -------------mobile-750px--------------------------------------------------------------- */	
@media screen and (max-width: 750px) {
	body { 
	width:98%; 
	margin: 10px auto;
	}
	article{
	font-size:11px;
	padding:0 0 0 0;
	}
	#bio{
	padding:7px 0 15px 32px;
	} 
	#open {
	  right:7px;
	  top:10px;
	}	
	.logo-r{
	white-space: nowrap;	
	margin:0 0 10px 0;		
	}
	.logo{
	width:96%;
	left:0%;
	
	padding: 0 0 15px 0;
	position: relative;

  left: -0.8vw;
	}	

.header-image {
  width: 13vw; 
   margin-left:auto;
}

	.tag{
	padding:0 0 5px 0;	
	}
	.title{
	font: bolder 13px Sans-serif;
	}
	.works{
	padding:0 0 0 0;
	}
	#menu{
	display:none;	
	}
 .half{
	     width: 50 !important;
		padding:0 4px 30px 4px;
 }
	.half2{
	     width: 50% !important;
		 padding:0 4px 30px 4px;
	}
   .half3{
	     width: 50% !important;
		 padding:2px;
		 font-size:10px;

 }
  .half3 ul li ,  .half3 ul li p ,.half3 ul li strong{
	  color:#ff0000;
		 font-size:10px;
		 line-height:1.2em;
		 }
	.half4{
	     width: 50% !important;
		 padding:0 4px 0 4px;
 }
    .half5{
	     width: 100% !important;
		 padding:0 4px 0 4px;
		 left:0%;
		 position:relative;
 }
    .half6{
	     width: 100% !important;
		 padding:0 4px 0 4px;
		 left:0%;
		 position:relative;
 }

      .half7{
	     width: 100% !important;
		 padding:0 4px 0 4px;
		 left:0%;
		 position:relative;	 
 }
.bio-smart{
	max-width:100%;
margin: 0 auto!important;
}	
#sample-box{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 100% 0 0;
}
#sample-box .sample-inner{
left:0;
}
.sample{
	margin:10px 0 0 0;
	clear: both;
}
.pa,.dr,.ph,.sc,.ex,.go,.half4 {
	padding:0 0 30px 0;
} 
.dr2,.bk {
	padding:0 4px 30px 4px;
}
.pa img,.dr img,.ph img,.sc img,.ex img,.bk img,.go img,.half4 img,.sample img,.an img {
	padding:0 0 2px 0;
}
.sample-inner p{
	 line-height:16px;
}

.swiper-button-prev2, .swiper-button-next2{
	width:45px ;
}


.swiper-slide img {

  max-height:none ;

}




#pageTop {

  position: fixed;
  bottom: 5px;
  right: 15px;
}
}



@media screen and (max-width: 800px) {
	#text1{
	display:none;
}}