@charset "utf-8";
/* レイアウトのためのCSS */

body{
    background:#000;
    font-family: 'Noto Serif JP', serif;
	color: #eee;
	font-size:1rem;
	line-height:1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
}

*{box-sizing: border-box;}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #eee;
	text-decoration: none;
    outline: none;
}

img{
    max-width: 100%;
    height: auto;
	align-items: center;
}

/* loading ※https://projects.lukehaas.me/css-loaders/参照*/

.loader,
.loader:before,
.loader:after {
  background: #ffffff;
  animation: load1 1s infinite ease-in-out;
  width: 0.5em;
  height: 1em;
}
.loader {
  color: #ffffff;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}

@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 1em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 2em;
  }
}


/* area */
.inner{
    width:100%;
max-width: 1400px;
    margin:0 auto;
    padding:40px;
}
.inner1{
    width:100%;
max-width: 1400px;
    margin:0 auto;
    padding:40px 40px 0px 40px;
}

.inner2{
    width:100%;
    margin:0 auto;
    padding:0px 0px 40px 0px;
}
.inner3{
    width:100%;
max-width: 1400px;
    margin:0 auto;
    padding:20px 40px;
}

@media screen and (max-width:990px) {
.inner{
    padding:15px;
}
	.inner1{
    width:100%;
    margin:0 auto;
    padding:20px 15px 0px 15px;
}

	.inner2{
    padding:0px 0px 15px 0px;
}
.inner3{
    width:100%;
    padding:5px 15px;
}

}
.center{
	text-align: center;
	margin: 0 auto;
}
.komidashi-center {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	text-align: center;
	    letter-spacing: 0.08em;

}

.komidashi-center::before,
.komidashi-center::after {
	content: '';
	width: 25%;
	height: 1px;
	background-color: #aaa;
}

.komidashi-center::before {
	margin-right: 15px;
}
.komidashi-center::after {
	margin-left: 15px;
}

#container{
    overflow-x: hidden;
    /*以下、IE11用*/
    z-index: 1;
    position: relative;
}

/* font-family */


h2,
#service .service-area section h3,
#g-nav,
#footer-link,
.scrolldown1 span,
#vidual-area dt,
.footer-logo{
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.14em;
}

/* heading */

h2{
    font-size: 2rem;
    margin: 0 0 30px 0;
    text-transform: uppercase;
}

/* header */
#header{
	position: relative;
}
#header h1 a img{
    position: absolute;
      top:5px;
      left:5px;
      padding: 0;
	  	width: auto;
height: 65px;
}


@media screen and (max-width:960px){
  #header h1 a img{
    position: absolute;
      top:5px;
      left:5px;
      padding: 0;
	  	width: auto;
height: 65px;

    }
}

.scrolldown1 span {
    transform: rotate(-90deg);
    text-transform:uppercase;
    left: -23px;
    top: -31px;
}

/* breadcrumb */
#breadcrumb_area{
	width: 100%;
}
#breadcrumb_area2{
	width: 100%;
margin-top: 90px;
}

@media screen and (max-width:990px) {

#breadcrumb_area{
	width: 100%;

}
}

.breadcrumb {
    display: flex;
	justify-content: flex-start;
    gap: 0 20px;
    list-style: none;
	font-size: .9em;

}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:first-child::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23b61818'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

.breadcrumb li:not(:last-child)::after {
    display: inline-block;
    transform: rotate(45deg);
    width: .3em;
    height: .3em;
    margin-left: 10px;
    border-top: 1px solid #b61818;
    border-right: 1px solid #b61818;
    content: '';
}

.breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}


/* vidualarea */
#vidual-area{
    position: relative;
    height: 100vh;
}

body.appear #vidual-area::after{
    content:'';
    width:0;
    height: 12%;
    position: absolute;
    bottom:0;
    left:0;
    z-index: -1;
	animation-name:vidualbgRLextendAnime;
    animation-duration:.2s;
	animation-fill-mode:forwards;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
}

@keyframes vidualbgRLextendAnime{
	0% {
		width:0;
	}
	100% {
		width:40%;
	}
}


#vidual-area #slider-area{
    position: absolute;
    top:0;
    right: 0;
    width:85%;
    z-index: -1;/*最背面へ*/
}

#vidual-area h2{
    line-height: 1.5;
    text-transform: uppercase;
    font-size: 3vw;
    position: absolute;
    top:36%;
    left:5%;
}

#vidual-area dl{
    position: absolute;
    left:2%;
    bottom:2%;
}

#vidual-area dl{
    color:#aaa;
}

#vidual-area dt,
#vidual-area dd,
#vidual-area ul,
#vidual-area ul li{
    display: inline-block;
}

#vidual-area dt{
    text-transform: uppercase;
}

#vidual-area ul li{
    margin:0 10px;
}

#vidual-area ul img{
    width:20px;
}

@media screen and (max-width:960px) {
#vidual-area{
    height: 90vh;
}
#vidual-area #slider-area{
    width:100%;
    height: 90vh;
}
#vidual-area h2{
    font-size:2.1rem;
	display: none;
}
#vidual-area dl{
    left:20px;
    bottom:16px;
}
#vidual-area ul li{
    margin:0 2px;
}
    
}

@media screen and (max-width:450px) {
#vidual-area h2{
    font-size:7vw;
    top: inherit;
    bottom: 13%;
}

}

/* topimg */

#topimg{
    position: relative;
    display: flex;
    justify-content: center;
margin-top: 70px;
}
#topimg .about_topimg{
	 height: 25vh;
    padding: 10vh 0 0 0;
    width:100%;
	background:url("../img/about/topimg-about.jpg") no-repeat center;
    background-size:cover;
}
#topimg .gallery_topimg{
	 height: 25vh;
    padding: 10vh 0 0 0;
    width:100%;
	background:url("../img/gallery/topimg-gallery.jpg") no-repeat center;
    background-size:cover;
}
#topimg .profile_topimg{
	 height: 25vh;
    padding: 10vh 0 0 0;
    width:100%;
	background:url("../img/profile/topimg-profile.jpg") no-repeat center;
    background-size:cover;
}
#topimg .studio_topimg{
	 height: 25vh;
    padding: 10vh 0 0 0;
    width:100%;
	background:url("../img/studio/topimg-studio.jpg") no-repeat center;
    background-size:cover;
}

#topimg .contact_topimg{
	 height: 25vh;
    padding: 10vh 0 0 0;
    width:100%;
	background:url("../img/contact/topimg-contact.jpg") no-repeat center;
    background-size:cover;
}

#topimg .menu_topimg{
	 height: 25vh;
    padding: 10vh 0 0 0;
    width:100%;
	background:url("../img/menu/topimg-menu.jpg") no-repeat center;
    background-size:cover;
}
#topimg .id_topimg{
	 height: 25vh;
    padding: 10vh 0 0 0;
    width:100%;
	background:url("../img/home/studio/img_studio.jpg") no-repeat center;
    background-size:cover;
}
#topimg h2{
     font-size:2rem;
    letter-spacing:0.2em;
	text-align: center
}
@media screen and (max-width:768px) {
#topimg .about_topimg{
	 height: 18vh;
    padding: 8vh 0 0 0;
    width:100%;
	background:url("../img/about/topimg-about.jpg") no-repeat center;
    background-size:cover;
}
#topimg .gallery_topimg{
	 height: 18vh;
    padding: 8vh 0 0 0;
    width:100%;
	background:url("../img/gallery/topimg-gallery.jpg") no-repeat center;
    background-size:cover;
}
#topimg .profile_topimg{
	 height: 18vh;
    padding: 8vh 0 0 0;
    width:100%;
	background:url("../img/profile/topimg-profile.jpg") no-repeat center;
    background-size:cover;
}
#topimg .studio_topimg{
	 height: 18vh;
    padding: 8vh 0 0 0;
    width:100%;
	background:url("../img/studio/topimg-studio.jpg") no-repeat center;
    background-size:cover;
}

#topimg .contact_topimg{
	 height: 18vh;
    padding: 8vh 0 0 0;
    width:100%;
	background:url("../img/contact/topimg-contact.jpg") no-repeat center;
    background-size:cover;
}
	#topimg .menu_topimg{
	 height: 18vh;
    padding: 8vh 0 0 0;
    width:100%;
	background:url("../img/menu/topimg-menu.jpg") no-repeat center;
    background-size:cover;
}

#topimg .id_topimg{
	 height: 18vh;
    padding: 8vh 0 0 0;
    width:100%;
	background:url("../img/home/studio/img_studio.jpg") no-repeat center;
    background-size:cover;
}

#topimg h2{
     font-size:1.5rem;
}
}




/* lead */

#lead{
    width:100%;
    position: relative;
    display: flex;
    justify-content: center;
    height: 55vh;
    padding: 10vh 0 0 0;
	 background:url("../img/home/lead/lead-01.jpg") no-repeat center;
    background-size:cover;

}




#lead .lead-area{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}


#lead .lead-heading{
    width:30%;
}

#lead h2{
     font-size:1.9rem;
    letter-spacing: 0.2em;
    line-height: 2.2;
    padding: 0 0 0 30px;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;    
}

#lead .lead-desc{
    width:70%;
    display: flex;
    flex-direction: row-reverse;
    height: 20em;
}

#lead .lead-desc p{
    width:12em;
    letter-spacing: 0.1em;
    line-height: 2.9;
    margin: 0 0 0 25px;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;   
	font-size: 1.1rem;
}
#lead .lead-btn{
margin-right: 20px;}

#lead .btnarrow5{
   padding: 20px 15px 40px 15px; 
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;    
}

#lead .btnarrow5::before{
    top:90%;
    right:50%;
    width:1px;
    height: 40px;
}

#lead .btnarrow5::after{
    top: 105%;
    right:60%;
}

_:-ms-lang(x), #lead .btnarrow5::after{
    right:70%;
}


@media screen and (max-width:1020px) {
#lead h2{
    line-height: 1.7;
    padding: 0 0 0px 0;
    display: inline-block;
    text-align: left;
    font-size: 1.8rem;
    letter-spacing: 0.2em;
}
    
#lead .lead-desc p{
    line-height:2.5;
		font-size: 1.0rem;

}
    
}


@media screen and (max-width:920px) {

    #lead{
    height:auto;
    padding:70px 0;
    }
    
#lead .lead-heading{
    width:100%;
    text-align: center;
}

    
#lead .lead-desc{
    width: 100%;
    padding: 0 30px;
    display: block;
    height: auto;
}
    
#lead .lead-desc p{
    width:auto;
    margin: 0 0 20px 0;
	    line-height:1.9;

    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
}
 #lead .lead-desc p br{
    display: none;
}


#lead .btnarrow5{
    display: block;
    padding: 8px 30px;
    width:250px;
    margin: 0 auto;
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
}

#lead .btnarrow5::after{
    top: 152%;
    right: 52%;
}
    
}


/* history */

#history{
    position: relative;
}

#history .history-btn{
	text-align: right;
    margin-right: 20px;
}


.history-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
}
#history .history-img-wrapper{
    position:relative;
    overflow: hidden;
    width:50%;
    height: 40vh;
}

#history .history-img{
    background:url("../img/home/history/img_historyshibata03-sp.jpg") no-repeat center;
    background-size: cover;
    height: 40vh;
}
.history-content{
    width:45%;
    padding: 0px 0 0px 0;
}

@media screen and (max-width:768px) {
	
#history{

	
}

    .history-content{
    padding:0px;
	  width:100%;

    }  
	
	#history .history-img-wrapper,
#history .history-img{
    background:url("../img/home/history/img_historyshibata03-sp.jpg") no-repeat center;

    width:100%;
    background-size:  contain;
    height: 40vh;
    }
	
    #history .history-img-wrapper{
        margin:0 0 20px 0;
    }

}



@media screen and (max-width:430px) {
    .history-img{
        background:url("../img/home/history/img_historyshibata03-sp.jpg") no-repeat center;
    width:100%;
    background-size:  contain;
        height:40vh;
    }
}

/* menu */

#menu{
    position: relative;
}

#menu ul{
width: 100%;
}
#menu .menu-list{
	
	display: flex;
	justify-content:flex-start;
	align-items: center;
	flex-wrap: wrap;
}

#menu ul li{
	width: 25%;
	padding: 10px 10px;
}
#menu ul li .menu-list_name{
text-align: center;
padding: 0px;
}



@media screen and (max-width:768px) {

#menu ul li{
	width: 50%;
	padding: 10px 5px;
}
	#menu ul li .menu-list_name{
	text-align: center;
padding: 0px 0px;
		font-size: 0.8rem;
}
}











/* item-menu */

#item-menu{
position: relative;

}

@media screen and (max-width:768px) {
    #item-menu .item-menu-exp{
        padding: 0px 5px;
    }
}

@media screen and (max-width:500px) {
    #item-menu .item-menu-exp{
        padding: 0px 5px;
    }
	
	
#item-menu .item-menu-exp br {
    display: none;
}
}


#item-menu .item-menu-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding:30px 0 0 0;
    position: relative;
}


#item-menu .item-menu-area section{
     width:33%;  
		padding: 10px 10px;
margin-bottom: 40px;

}
#item-menu .item-menu-area section h3{
    font-size:1.5rem;
		padding: 10px 5px;

}
#item-menu .item-menu-area section img{
width: 100%;
	padding: 5px;
}

#item-menu .item-menu-area section p{
		padding: 5px 10px;
	margin-bottom: 10px;

}
#item-menu .item-menu-btn{
	text-align: right;
    margin-right: 30px;
}

@media screen and (max-width:768px) {
#item-menu .item-menu-area section{
    width:100%;
margin-bottom: 40px;
padding: 0px 0px;

	}
 

#item-menu .item-menu-area section h3{
    font-size:1.3rem;
	padding: 5px 10px;

}

#item-menu .item-menu-area section p{
	padding: 5px 10px;

}

#item-menu .item-menu-btn{
	text-align: right;
    margin-right: 40px;
}

}

@media screen and (max-width:768px) {
#item-menu .item-menu-img-wrapper,
#item-menu .item-menu-img{
    width:100%;
    height: 50vh;
    background-position: right;
    }
#item-menu .item-menu-img-wrapper{
        margin:0 0 50px 0;
    }
}



/* access */

#access{
    position:relative;
}


#access .access-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background:#262626;
    width:100%;
    margin: 0 auto;
	    height: 40vh;

}

#access .access-area .access-block{
    width:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
		    height: 40vh;

}

#access .access-area .access-block h3{
    font-size: 1.2rem;
    margin: 0 0 10px 0;
}

#access .access-area .access-block p{
    margin: 0 0 20px 0;
}

#access .access-map{
    width:50%;
		    height: 45vh;

}

#access .iframe-wrap {
  position: relative;
  padding-bottom: 70%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  z-index: 2;
}

#access .iframe-wrap iframe,
#access .iframe-wrap object,
#access .iframe-wrap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width:1040px) {
    #access .access-area .access-block,
    #access .access-map{
        width:100%;
    }   
    #access .access-area .access-block{
        padding:40px 20px;
    }
}


@media screen and (max-width:768px) {
#access .access-bg{
    background-attachment: inherit;
    }
}

/* studio */

#studio{
	    position: relative;


}
#studio .studio-img-wrapper{
    position:relative;
    z-index: 1;
    overflow: hidden;
    width:100%;
    height: 45vh;
}


#studio .studio-img{
    height: 45vh;
    background:url("../img/home/studio/img_studio.jpg") no-repeat center;
    background-size: cover;
}

#studio .studio-area{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
#studio .studio-area .studio-tit{
     font-size: 2.0rem;  
	text-align: center;

}

#studio .studio-area .studio-text{
     font-size: 1.0rem; 
	    width:100%;
		padding: 10px;
		text-align: center;
}

#studio p br{
     display: none;   
}
#studio .studio-btn{
	text-align: center;
	padding: 20px 10px;
}

@media screen and (max-width:990px) {
#studio .studio-area .studio-tit{
     font-size: 1.7rem;  
		padding: 5px;

}

#studio .studio-area .studio-text{
     font-size: 1.0rem; 
	    width:100%;
		padding: 5px;
		text-align: center;
}
    
}

@media screen and (max-width:540px) {

#studio p br{
     display:block;   
}
    
}


/* slide_auto */
#sliding{
 position: relative;
	margin: 0 auto;
}

.sliding_auto{
}
	

.sliding_auto img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.sliding_auto .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}
@media screen and (max-width:768px) {

#sliding{
}}


/* movie */
#movie  {
    position:relative;
}

#movie .video {
width: 100%;
	display: flex;
	justify-content: center;
	  margin: 0px auto;
}

#movie .video .iframe-wrap {
  width: 100%;
    height: 45vh;
}


@media screen and (max-width: 768px) {
#movie{
}

#movie .video  {
	margin: 10px auto;
}
#movie .video .iframe-wrap {
  width: 100%;
    height: 30vh;

}

}


/* news */

.news-img-wrapper{
    position:relative;
    z-index: 1;
    overflow: hidden;
    width:100%;
    height: 60vh;
}

.news-img{
    height: 60vh;
    background:url("../img/home/studio/img_studio.jpg") no-repeat center;
    background-size: cover;
}

.news-img::after{
     content:'';
    position: absolute;
    bottom:0;
    left:0;
    width:70%;
    height: 10vh;
    background:#000;
    z-index:2;
}

#news{
    padding: 0 0 5% 15%;
}

#news .area li{
    padding: 20px 0;
}

#news .area time{
    display: block;
    color: #aaa;
}

#news .tab{
    position: relative;
    top:1px;
}

#news .tab-choice-area{
    border-top:1px solid #aaa;
    border-left:1px solid #aaa;
}

@media only screen and (max-width: 1110px) {
    .tab-area{
        width:100%;
    }
    
}

@media only screen and (max-width: 768px) {
#news {
    padding: 0 0 5% 30px;
}
}


/* contact */

#contact{
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	margin-top: 50px;
}

#contact .contact-detail{
    width:65%;
    border-right: 1px solid #aaa;
    text-align: center;
    padding: 20px;
}

#contact .contact-detail h2{
     margin:0 0 5px 0;   
    font-size: 1.5rem;
}

#contact .contact-tel{
     width:35%;
}

#contact .contact-tel p{
    text-align: center;
}

#contact .contact-tel p a{
     display: block;  
    padding: 20px;
    transition: all .3s;
}

#contact .contact-tel p a:hover{
     background:rgba(255,255,255,0.2);   
}

#contact .contact-tel p:last-child{
    border-top:1px solid #aaa;
}

#contact .contact-tel br{
    display: none;
}

@media screen and (max-width:690px) {
#contact .contact-detail,
#contact .contact-tel{
    width:50%;
}
    
#contact .contact-tel br{
    display: block;
}
#contact .contact-detail h2{
    font-size: 1.2rem;
}
#contact .contact-detail p{
    text-align: left;
}
}

@media screen and (max-width:400px) {
    #contact{
        font-size: 0.8rem;
    }
}



/* gallery */

#gallery{    
	position: relative;
	margin: 0px auto 80px;
	}



/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.sort-btn li{
list-style:none;
	border-radius:6px;
	cursor: pointer;
	padding: 5px 8px;
	margin:0px 5px 10px;
	  background:#262626;

}

.sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
	background:#888;	
}

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn{
flex-direction: column;}
	
.sort-btn li{
	padding: 5px;
	margin:0 15px 10px 15px;
	text-align:center;
	font-size: 0.9rem;
	}	
}

/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;/*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 24.8%;/*横並びで4つ表示*/
  z-index: 1;
list-style:none;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
padding: 5px;

}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.item {
  width: 49.5%;/*横並びで2つ表示*/
}
}

/* photoitem */
#photoitem{
  position: relative;

}
.photoitem_area {
	width: 100%;
}

.photoitem_exp{
	font-size: 1.3rem;
	padding-bottom: 10px;
	text-align: center;
	line-height: 2.5;

}

.photoitem_contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
	margin-top: 0px;
}

.photoitem_img-area{
	  width: 42%;

	
}
.photoitem_img {
}


.photoitem-note-area{
	width: 100%;
	padding: 20px;
	border: thin solid #ccc;
	margin: 50px auto;
}

.photoitem-note{
	font-size: 1.0rem;
	line-height: 1.8;
	text-align: left;
padding: 10px 5px;
}

.photoitem_text-area {
  width: 55%;
  text-align: left;
  letter-spacing: 1.5px;
  line-height: 2;
	padding: 10px 0px;

}
.photoitem_tit{
	font-size: 1.7rem;
	text-align: left;
	line-height: 2.0;
padding: 10px　10px 10px 0px;
	margin-bottom: 20px;

}
.photoitem_te{
	font-size: 1.0rem;
padding-bottom: 20px;	
	text-align: left;
	line-height: 2.5;

}
.photoitem-wrap{
	width: 100%;
	margin-top: 50px;
	padding: 10px;
}
.photoitem-list{
 padding: 10px;
margin: 30px 50px;
}
.photoitem-listtit{
	 padding: 10px;
text-align: center;}

.set-item-exp{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
	margin-top: 50px;
	
}
.set-item-exp2{
  display: flex;
  justify-content: space-between;
	
}
.set-item-exp-balloon2{
	justify-content: flex-end;

}

.set-item-exp-balloon1{
}
.set-item-exp-text{
padding: 10px 10px 20px 20px;;
}

@media (max-width: 768px) {
	.set-item-exp{
  display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
		margin-top: 20px;
	
}
.set-item-exp2{
  display: flex;
flex-direction: column-reverse;
		margin-top: 0px;
	
}
.set-item-exp-balloon2{
	  display: flex;

	justify-content: flex-end;
	width: 100%;

}

.set-item-exp-balloon1{
	width: 100%;
}
.set-item-exp-text{
		width: 100%;

padding: 10px 10px 20px 10px;;
}

.photoitem_contents {
  display: flex;
  flex-direction: column;
  align-items: center;
		margin-top: 30px;

}

.photoitem_img-area {
  width: 100%;
}
.photoitem_text-area {
  width: 100%;

}
.photoitem_tit{
	font-size: 1.5rem;
	text-align: left;
	line-height: 1.8;
padding: 5px;
	margin-bottom: 10px;

}
	
.photoitem_exp{
	font-size: 1.0rem;
	text-align: left;
	padding-bottom: 10px;
}

.photoitem-list{
 padding: 0px;
margin: 30px 0px;
}

}

#photoitem-price{
	  position: relative;

	
}
#photoitem-option{
	  position: relative;

	
}

/* price */
#price-plan{
  position: relative;

}
.price-plan_area {
	width: 100%;
}

.price-plan_exp{
	font-size: 1.1rem;
	padding-bottom: 10px;
	text-align: center;
	line-height: 2.5;

}

.price-plan_contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
	margin-top: 50px;
}
.price-plan_img {
  width: 30%;
	background-color: beige;
}


.price-plan_text {
  width: 65%;
  text-align: left;
  letter-spacing: 1.5px;
  line-height: 2;
	padding: 10px 0px;

}
.price-plan_tit{
	font-size: 1.8rem;
	text-align: left;
	line-height: 2.5;
padding: 10px;
}
.price-plan_te{
	font-size: 1.0rem;
padding-bottom: 20px;	
	text-align: left;
	line-height: 2.5;

}
.price-plan-list{
 padding: 10px;
margin: 30px 50px;
}
.price-plan-listtit{
	 padding: 10px;
text-align: center;}

.table-design01 {
 width: 100%;
 border-collapse: collapse;
 border-spacing: 0;
text-align: center;
	 background: #fff;
	color: #111;


}
.table-design01 th {
 padding: 10px;
 background: #ccc;
 border: solid 1px #333;
	text-align: center;

}
.table-design01 td {

 padding: 10px;
 border: solid 1px #333;
}

.table-design02 {
 width: 100%;
 border-collapse: collapse;
 border-spacing: 0;
text-align: center;
	 background: #fff;
	color: #111;


}
.table-design02 th {
 padding: 10px;
 background: #b61818;
 border: solid 1px #333;
	text-align: center;
	color: #fff;

}
.table-design02 td {

 padding: 10px;
 border: solid 1px #333;
}
.table-w35{
	width: 35%;

}
.table-w65{
	width: 65%;
}
.table-w20{
	width: 20%;
}
.table-w45{
	width: 45%;
}

@media (max-width: 768px) {

.price-plan_contents {
  display: flex;
  flex-direction: column;
  align-items: center;
		margin-top: 30px;

}

.price-plan_img {
  width: 100%;
}
.price-plan_text {
  width: 100%;

}
	
.price-plan_exp{
	font-size: 1.0rem;
	text-align: left;
	padding-bottom: 10px;
}

.price-plan-list{
 padding: 10px;
margin: 30px 0px;
}

}


/* studio */
#studio{
  position: relative;

}
.studio_area {
	width: 100%;
}
.studio_contents {
  display: flex;
flex-direction: column;
	justify-content: center;
	width: 100%;
	margin-top: 20px;

}

.studio_image {
width: 400px;
margin: 0 auto;
}
.studio_text{
	font-size: 1.3rem;
	padding-bottom: 10px;
	text-align: center;

}
@media (max-width: 768px) {

.studio_image {
  width: 100%;
  height: auto;
}
	
.studio_text{
	font-size: 1.1rem;
	padding-bottom: 10px;
}

}

/* ayumi */
#ayumi{
position: relative;
}

.ayumi_area {
	width: 100%;
  padding: 0px;
margin: 0 auto;

}

.ayumi_contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ayumi_image {
  width: 30%;
	background-color: beige;
}


.ayumi_text {
  width: 65%;
  text-align: left;
  letter-spacing: 1.5px;
  line-height: 2;
	padding: 10px 0px;

}

@media (max-width: 768px) {

#ayumi{
}
	

 .ayumi_area {
	 width: 100%;

  }
.ayumi_contents {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ayumi_image {
  width: 100%;
}
.ayumi_text {
  width: 100%;
	padding: 15px 0px;

}

}






/* shopinfo */
#shopinfo{
  position: relative;
}

.shopinformation_area {
	width: 100%;
  padding: 0px;
margin: 0 auto;

}
  .shopinformation_image,
  .shopinformation_table {
    width: 100%;
  }


.shopinformation_contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shopinformation_image {
  width: 50%;
}
.shopinformation_table {
  width: 45%;
  border-spacing: 16px;
  text-align: left;
  letter-spacing: 1.5px;
  line-height: 2;
}
.shopinformation_table_heading {
  width: 25%;
  border-right: 1px solid #a0a0a0;
}

@media (max-width: 768px) {

#shopinfo{
}
	

 .shopinformation_area {
	 width: 100%;

  }
	.shopinformation_contents {
  display: flex;
		flex-direction: column;
  align-items: center;
}
.shopinformation_image {
  width: 100%;
}
.shopinformation_table {
  width: 100%;
  border-spacing: 16px;
  text-align: left;
  letter-spacing: 1.5px;
  line-height: 2;
}

}


/* map */

#map{
  position: relative;
margin: 0 auto;
width: 100%;
}
.gmap{
padding: 10px 0;	
}	
@media (max-width: 768px) {

#map{
  position: relative;
margin: 0 auto 30px;
width: 100%;
}
}

/* profile */

#profile{
    position: relative;

}


.profile-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
}

.profile-imgbox{
    width:35%;
}
.profile-img{
	width: 100%;
}

.profile-imgbox h3{
	font-size: 1.8rem;
	text-align: center;
	padding:10px; 
    letter-spacing:0.2em;

}

.profile-content{
    width:60%;
    padding: 0px 0 0px 0;

}


@media screen and (max-width:768px) {
	
#profile{

	
}
.profile-imgbox{
    width:100%;
}
.profile-img{
	width: 100%;
}

.profile-imgbox h3{
	font-size: 1.6rem;
		padding:5px; 

}


    .profile-content{
		        width:100%;
    }  
}

@media screen and (max-width:430px) {
    .profile-img{
    }
}

/* award-winning*/

#award-winning{
    position: relative;
	width: 100%;

}


#award-winning h3{
    font-size: 0.8rem;
}

#award-winning p{
    font-size: 1.0rem;
	padding: 5px;
	margin-bottom: 10px;
}

#award-winning .award-winning-area{
    padding: 10px;
	text-align: center;
}




/* media */


#media{
    position: relative;

}
#media .media_wrap{
	margin: 0 auto;
	  width: 100%;
}

@media screen and (max-width:1024px) {
#media .media_wrap{
}


}

@media screen and (max-width:768px) {

#media .media_wrap{
		  width: 100%;
	
}
	#media li {
list-style-type:disc;

 margin-left: 10px;

}

}

#media .media_list {
			display: flex;
flex-direction: column;
	justify-content: center;

}

#media .media_tit {
padding: 10px 0px;
font-size: 1.5rem;
}




#media ul{
margin-bottom: 30px;
}


#media li {
list-style-type:disc;
 margin-left: 25px;

}
/* contact */

#contact_form{
	
}
.contact_form-wrap{
	width: 100%;
	padding: 10px;
	
}

.contact_form-wrap p{
	text-align:center;
	font-size: 1.0rem;
}
@media only screen and (max-width: 768px) {

.contact_form-wrap p{
	text-align:left;
	font-size: 1.0rem;
}}

/* reason */

#reason{
    position:relative;
	width: 100%;
}

#reason .reason-bg{
    position: relative;
    background:url("") no-repeat center;
    background-size:cover;
    background-attachment:fixed;
    width:100%;
    height:100vh;
}

#reason section{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;

}

#reason section:nth-of-type(2n){
    flex-direction:row-reverse;
}

#reason .reason-img{
    width:50%;
    height:70vh;
}

#reason .reason-img-detail{
    height:70vh;
}

#reason .reason-box{
    animation-delay:.5s;
}

#reason .reason-content{
    width:50%;
    display:flex;
    justify-content:flex-start;
    align-items:center;

}

#reason section:nth-of-type(1) .reason-img-detail{
    background:url("../img/about/reason-01.jpg") no-repeat center;
    background-size:cover;
}

#reason section:nth-of-type(2) .reason-img-detail{
    background:url("../img/about/reason-02.jpg") no-repeat center;
    background-size:cover;
}

#reason section:nth-of-type(3) .reason-img-detail{
    background:url("../img/about/reason-03.jpg") no-repeat center;
    background-size:cover;
}
#reason section:nth-of-type(4) .reason-img-detail{
    background:url("../img/about/reason-04.jpg") no-repeat center;
    background-size:cover;
}
#reason section:nth-of-type(5) .reason-img-detail{
    background:url("../img/about/reason-05.jpg") no-repeat center;
    background-size:cover;
}

#reason .reason-box{
	padding: 10px 40px 10px 40px;
	text-align: left;

}
#reason .reason-content h3{
    font-size:1.6rem;
    line-height:1.2;
	padding-bottom: 20px;

}
#reason .reason-content h3::first-letter {
    font-size:3.3rem;
  font-style: italic;
}

#reason .reason-content p{
    line-height:1.6;
	font-size:1.0rem;
	padding-bottom: 20px;

}

#reason .reason-content p span{
background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #b61818 0%) repeat scroll 0 0;
}    

@media screen and (max-width:1024px) {
#reason{
    position:relative;
}


	
#reason .reason-box{
	padding: 30px;
	text-align: left;
}
#reason .reason-content h3{
    font-size:1.5rem;
    line-height:1.2;

}

#reason .reason-content p{
    line-height:1.5;
	font-size:1.0rem;
	padding-bottom: 20px;

}
#reason .reason-img{
    width:100%;
    height:70vh;
}

#reason .reason-img-detail{
    height:70vh;
}

#reason .reason-box{
    animation-delay:.5s;
}

#reason .reason-content{
    width:100%;
    display:flex;
    justify-content:flex-start;
    align-items:center;

}

#reason .reason-bg{
    background-attachment: inherit;
    }
}
@media screen and (max-width:768px) {


	
#reason .reason-box{
	padding: 10px;
	text-align: left;
}

#reason .reason-content p{
    line-height:1.5;
	font-size:1.0rem;
	padding-bottom: 60px;

}
}

@media screen and (max-width:560px) {
    
#reason .reason-img,
#reason .reason-content{
    width:100%;
    margin: 0px;
}
    
}

/* footer */

#footer{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    opacity: 0.8;
    padding:3% ;
}

#footer .footer-info{
    width:30%;
}

#footer .footer-info .footer-logo{
    margin: 0 0 10px 0;
	width: 200px;
}

#footer .footer-info address{
    font-style: normal;
    margin: 0 0 10px 0;
}

#footer .footer-info ul li{
    margin: 0 0 10px 0;
}

#footer .footer-info dl dt,
#footer .footer-info dl dd{
    display: inline-block;
}

#footer .footer-info dl dt::after{
    content:':';
    padding: 0 10px;
}


#footer .footer-link{
    width:65%;
}

#footer .footer-link ul{
     display: flex;
    flex-wrap: wrap;
    line-height: 2.5;
}

#footer .footer-link ul li{
    margin: 0 15px;
}
    #footer .footer-link ul img{
    width:20px;
}

#footer .footer-link ul ul li{
    margin:0 10px 0 0;
}

#footer small{
    padding: 100px 0 0 0;
    display: block;
    text-align: right;
    color: #aaa;
}
#footer .footer-link ul ul{
     display: block;
}

@media screen and (max-width:830px) {
    #footer{
        justify-content: center;
        padding:5% 0;
    }
    #footer .footer-info{
        width:100%;
        padding: 0 0 5% 0;
        margin: 0 0 5% 0;
        text-align: center;
        border-bottom: 1px solid #aaa;
    }
    #footer .footer-info li:nth-of-type(2) dt::after{
        content:'';
        padding: 0;
    }
    #footer .footer-info li:nth-of-type(2) dd{
        display: block;
    }
    #footer .footer-info .footer-logo{
    margin: 0 auto;
	width: 180px;
		        text-align: center;

}

    #footer .footer-link{
        width:auto;
    }

    #footer .footer-link ul {
    justify-content: center;
    }
    #footer .footer-link ul img{
    width:20px;
}

    #footer small {
        padding:10% 0;
        text-align:center;
    } 
}

@media screen and (max-width:400px) {
    #footer .footer-link ul li{
        margin: 0 10px;
}
}