@charset "UTF-8";
/* hashimoto web */
/* --- main color #6e7d8e --- */

html { font-size: 62.5%; box-sizing: border-box;}
body { height: 100%; margin: 0; padding: 0; font-size:1.6rem;/* 16px*/ line-height: 1.8; color: #000; 
font-family: sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-webkit-animation: fadeIn 1.5s ease 0s 1 normal; animation: fadeIn 1.5s ease 0s 1 normal; 
}
  @keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;}}
  @-webkit-keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;}}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased;}
*::before, *::after { box-sizing: border-box;}

@media (min-width: 768px) { body { font-size: 1.6rem;}}


/* -- element setting -- */

/* fonts */
@font-face { font-family: 'hashimotoMenu'; src: url(../fonts/agenda-light.woff);}

/* a link */
a { transition: color 110ms ease-in-out; color: #6e7d8e; text-decoration: none;}
a:visited { color: #6e7d8e;}
a:hover, a:active { color: #333; outline: 0; text-decoration: none;}
a:focus { outline: thin dotted; /*text-decoration: underline;*/}


/* -- contents setting -- */


/* header */
#header { height: auto; min-height: 100px; width: 100%; font-size:14px; vertical-align: bottom; display: block; position: fixed; top: 0; left:0; z-index: 20; text-align: center; background: #fff; transition: 50ms; /* border-bottom: 1px solid #ededed;*/}

#header h1.logo { width: 220px; margin: 30px auto 0;}
#header h1.logo img { width: 100%;}

#header p.headContactLink { width: 50px; height: 50px; position: absolute; top: 5px; right: 20px;}
#header p.headContactLink a { width: 100%; height: 100%; display: block; border: 1px solid #ccc; transition: .3s;}
#header p.headContactLink a:hover { cursor: pointer; background-color: #ececec; border: 1px solid #ececec; transition: .3s;}
#header p.headContactLink i:after { margin-top: -4px; padding-top: 3px; content: 'contact'; font-size: 6px; line-height: 1; font-family: hashimotoMenu, sans-serif; display: block;}
#header p.headContactLink i { margin: 12px 0 0; padding: 0; font-size: 20px; line-height: 1; }

@media (max-width: 960px) { 
#header h1.logo { width: 180px; margin-top: 18px;} 
#header { min-height: 75px; border-bottom: 1px solid #ececec;}
#header p.headContactLink { top: 0px; right: 20px; border-left: 1px solid #ececec; padding-left: 10px;}
#header p.headContactLink a { width: 50px; height: 50px; border: none; transition: .3s;}
#header p.headContactLink a:hover { border: none}
}


#header .headerInner { margin:0 auto 5px; padding: 0 0 0 2%; text-align: left;}
.headCenter-block { width: 75%; max-width: 1000px; margin: 0 0 0 5%; padding: 40px 0 0 2%; display: inline-block; } 
.head-shoulder { margin-left: 10px; color: #666; font-size: 10px; font-weight: normal; display: inline-block; transition: .1s;}
.head-logo { max-width: 200px; margin: 8px 0 5px; /*padding: 10px 0; */font-size: 0; display: inline-block; vertical-align: top;}
.head-logo img { width:100%;}
.head-logo a { transition: .3s;}
.head-logo a:hover { filter:alpha(opacity=80); -ms-filter: "alpha(opacity=80)"; opacity:0.80; transition: .3s;}

@media screen and (max-width: 1180px) { .headCenter-block { /*width: 100%;*/ /*margin: 0 0 0 3%;*/} }
@media screen and (max-width: 1140px) { .headCenter-block { width: 70%; margin: 0 0 0 2%;} }
@media screen and (max-width: 1000px) { .headCenter-block { /*margin: 0 0 0 .5%;*/}}
@media screen and (max-width: 960px) { 
#header,
#header .headerInner { max-height: 75px;}
.headCenter-block { width: auto; padding-top: 5px; float: right;}
.head-shoulder { display: none;}
.head-logo { max-width: 175px;  margin: 10px 0 5px 1%;}
}

/* header - scroll */
body.home #header.scr,
body.home #header.scr .headerInner { min-height: 0  !important; max-height: 80px; padding-top: 0; transition: 50ms;}
body.home #header.scr .head-shoulder { opacity: 0; font-size: 8px; transition: .1s;}
body.home #header.scr .head-logo { margin-top: 8px; transition: .3s;}
body.home #header.scr .headCenter-block { padding-top: 6px; }
body.home #header.scr .gnav > ul > li > ul { top: 40px /*45px*/ /*46px;*/}/* gdrop */

@media (max-width: 960px) {
body.home #header.scr,
body.home #header.scr .headerInner { max-height: 75px;}
body.home #header.scr .headCenter-block { padding-top: 5px; }
}



/* header home */
body.home #header { min-height: 110px  !important; transition: 50ms;}
body.home #header .headerInner { max-height: auto; padding-top: 15px; transition: 50ms;}
/*body.home #header p.head-logo { margin: 8px 0 5px; }*/
body.home #header .headCenter-block { padding-top: 6px !important;}
body.home #header .gnav > ul > li > ul { top: /*57px */51px;}/* gdrop */

@media (max-width: 960px) {
body.home #header,
body.home #header .headerInner { min-height: 0 !important; min-height: 50px; padding-top: 0; }
body.home #header .headCenter-block { padding-top: 10px; }

}



/* side nav */
.sideNav { width: 15%; font-family: hashimotoMenu, sans-serif; position: fixed; top: 100px; left: 50px;}
.sideNav ul { margin: 0; padding: 0; list-style: none; font-size: 20px;}
.sideNav ul li { margin: 0; padding: 0; }
.sideNav ul li a { width: 100%; margin: 0; padding: 20px; display: block; transition: .3s;}
.sideNav ul li a:hover { background-color: #ececec; transition: .3s;}
.sideNav a.left_link.current { background-color: #6e7d8e; color: #fff;}
.sideNav a.left_link.current:hover { background-color: #000;}

.sideNav li.nav_profile { margin-top: 20px; padding-top: 20px; border-top: 1px dotted #ccc;}

p.btn_sns_insta img { width: 25px;}
p.btn_sns_insta a { width: 100%; margin: 0; padding: 20px 0 10px 20px; display: block;transition: .3s;}
p.btn_sns_insta a:hover { background-color: #ececec; transition: .3s;}

@media (max-width: 960px) {.sideNav { display: none;}}


   /* hamburger */
/*#sp-nav-toggle { position: fixed; top: 20px; right: 25px; height: 32px; cursor: pointer; transition: .3s; z-index: 1000;}
#sp-nav-toggle > div { position: relative; width: 36px;}
#sp-nav-toggle span { width: 100%; height: 4px; left: 0; border-radius: 4px; display: block; background: #8e92c9; position: absolute; transition: top .5s ease, -webkit-transform .6s ease-in-out;}

#sp-nav-toggle span:nth-child(1) { top: 0;}
#sp-nav-toggle span:nth-child(2) { top: 10px;}
#sp-nav-toggle span:nth-child(3) { top: 20px;}

body.open #sp-nav-toggle span { background: #fff;}
body.open #sp-nav-toggle span:nth-child(1) { top: 15px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
body.open #sp-nav-toggle span:nth-child(2) { top: 15px; width: 0; left: 50%;}
body.open #sp-nav-toggle span:nth-child(3) { top: 15px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
*/

   /* sp nav contents */
/*#sp-nav { background: #8e92c9; color: #fff; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 990; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s ease;}*/

/*#sp-nav a { display: block; text-decoration: none; padding: 7px 14px; color: #fff; transition: color .6s ease;}*/
/*#sp-nav ul li { opacity: 0; transition: opacity .1s ease;}*/

/*body.open { overflow: hidden;}
body.open #sp-nav { visibility: visible; opacity: 1;}
body.open #sp-nav li { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);
  transition: opacity .9s ease, -webkit-transform 1s ease;
  transition: transform 1s ease, opacity .9s ease;
 -webkit-transform 1s ease;
}
p.spmenuLogo { width: 250px; margin: 0 auto 3em; padding: 0; text-align: center;}
p.spmenuLogo img { width: 100%;}
#sp-nav ul { margin: 0; padding: 0; list-style: none; font-size: 1.1em;}
#sp-nav ul li { margin: 0 0 4px; text-align: left; font-weight: bold;}
#sp-nav ul li a { padding: 5px 0 5px 2em; background: #fff; color:#474964; border-radius: 22px;  text-decoration: none; display: block; transition: .3s;}
#sp-nav ul li a:hover { background: #474964; color:#fff; transition: .3s;}
#sp-nav ul li.btn-en a { background: transparent; border: 1px solid #fff ; color: #fff;}
#sp-nav ul li.btn-en a:hover { background: #ffd300; border: 1px solid  #ffd300; color: #474964;} */


/* -- contents setting -- */
.contents { width: 80%; margin-left: 20%;}

@media (max-width: 1380px) { .contents { width: 70%;}}
@media (max-width: 960px) {
.contents { width: 100%; margin-left: 0; padding-top: 30px;}

}


/* swiper setting */
.swiper { width: 100%; max-width: 1000px; height: 660px; margin-left: 20%; padding: 0; box-sizing: border-box;}
.swiper-slide { text-align: center; background-position: center; background-size: cover; background-repeat: no-repeat; /*background-color: #efefef;*/}
.swiper-slide.vertical { background-size: contain; background-position: center;}
.swiper-slide img { width: auto; max-width: 100%; max-height: 100%; align-self: center;}
.swiper-pagination { width: 100% !important; max-width: 1000px; padding: 0 50px; position: static !important; box-sizing: content-box;}
.swiper-pagination-bullet { margin: 0 2px; background: #6e7d8e !important;}
.swiper-pagination-bullet-active { background-color: #6e7d8e !important; }

.swiper-button-next, .swiper-button-prev { color: #6e7d8e !important;}

.swiperArea { width: 100%; max-width: 1000px; margin: 100px 0 0; padding: 0 50px; height: auto; position: relative; box-sizing: content-box;}

.sliderTitle { padding: 5px 15px; font-family: hashimotoMenu, sans-serif; font-size: 30px; line-height: 1; color: #000/*#6e7d8e*/; background-color: rgba(255,255,255,0.4); position: absolute; top: -10px; left: 75px; z-index: 2;}

  /* movie */
.swiperArea#movie { /*margin-bottom: 50px;*/ }
.swiper-pagination.moviedot { margin-bottom: 50px;}
/*.swiperArea#movie .sliderTitle { color: #6e7d8e;}*/
.swiper.movieImage { height: 563px; }
.swiper.movieImage a { width: 100%; height: 100%; display: block;}
.swiper.movieImage .swiper-slide { position: relative;}
.swiper.movieImage .swiper-slide a:after { width: 150px; height: 150px; content: ''; background: url(../images/movie/movie_arr.svg) center no-repeat; background-size: contain; position: absolute; top: calc(50% - 150px/2); left: calc(50% - 150px/2); opacity: .7;}
/*.swiperArea#movie .swiper-button-next, .swiperArea#movie .swiper-button-prev { top: 50% !important;}*/




    /* swiper - main-image */
.swiper.portrait-image { /*margin: 110px 0 0;*/}

@media (max-width: 1380px) { 
.swiper { height: 630px; }
.swiper-slide { height: auto; flex-shrink:1}
/*.swiper-button-next, 
.swiper-button-prev { top: 45% !important;}*/
}


@media (max-width: 960px) {
.swiper { height: 400px; }
.swiper.movieImage { height: 390px; }
.swiper.movieImage .swiper-slide a:after { width: 100px; height: 100px; top: calc(50% - 100px/2); left: calc(50% - 100px/2);}
.swiperArea { padding: 0; margin: 80px 0 0;}
.swiperArea:nth-child(n+2) { margin-top: 30px;}
.swiperArea#movie .swiper-button-next, .swiperArea#movie .swiper-button-prev { top: 52% !important;}
.swiper-pagination { padding: 0;}
.swiper-button-next, .swiper-button-prev { color: #fff !important;}
.sliderTitle { margin: 20px 0 15px; padding: 0; font-size: 22px; position: static; text-align: center;}

}


/* profile */
.profileArea { width: 100%; max-width: 1000px; min-height: 300px; margin: 100px 0 100px 50px; padding: 0; box-sizing: border-box; border-top: 1px solid #ccc; }
.profileAreaInner { padding: 20px 75px 40px;}
.pTitle { margin-left: 20px; font-family: hashimotoMenu, sans-serif; font-size: 30px; line-height: 1; color: #000;}
.profileBlock { padding: 0;}
.profileBlock h6 { margin: 0 0 10px; padding: 0; font-size:1.6rem;}
.profileBlock h6 span { margin-left: 20px; font-family: hashimotoMenu, sans-serif; }
.profileBlock ul { margin: 20px 0 80px 25px; padding: 0; font-size: 15px;}
.profileBlock li { margin: 0; padding: 0;}
.profileArea p.btn_sns_insta { display: none;}

@media (max-width: 960px) {
.profileArea {  padding: 0; margin: 80px 0 0; min-height: auto; border-bottom: 1px solid #ccc;}
.profileAreaInner { padding-bottom: 75px;}
.pTitle { margin-left: 0; margin-bottom: 30px; text-align: center; font-size: 22px; }
.profileBlock h6 { font-size:1.4rem;}
.profileBlock ul { font-size: 14px;}
.profileArea p.btn_sns_insta { display: block;}
}
@media (max-width: 728px) { 
.profileAreaInner { padding: 0 30px 30px;}
.profileBlock ul { margin: 0 0 0 20px;}
}

.contactBlock { margin-top: 50px; padding: 25px 30px; border-top: 1px dotted #ccc;}
.contactBlock p { margin: 0 0 5px; padding: 0;}
.contactBlock p.adress { margin-bottom: 15px;}
.contactBlock p.adress .stName { margin: 0 0 5px; padding: 0; font-size: 15px; font-weight: bold; display: block;}
.contactBlock p.adress .notes { font-size: 13px;}
.contactBlock p a { padding: 10px 20px;}
.contactBlock p a:hover { background:#ccc;}
.contactBlock p span { margin-right: 3px; font-size: 12px;}

.profileArea p.btn_sns_insta { margin: 20px 0 0; text-align: center;}
.profileArea p.btn_sns_insta a { padding-left: 0; padding-right: 0;}

/*.contactBlock .imageStudio {}
.contactBlock .imageStudio img { width: 100%;}*/
.contactBlock.studio { max-height: 250px; padding-left: 360px; border-top: none; background-color:#ececec; background-image: url(../images/profile/studio202.jpg); background-repeat: no-repeat; background-position: 0; background-size: auto 100%;}

.contactBlock.studio h6 { margin: 10px 0 20px; padding: 5px 0 5px 10px; color: #666; font-size: 12px; font-weight: bold; line-height: 1; border-left: 3px #999 solid; display: inline-block;}


@media (max-width: 1090px) { .contactBlock.studio p { line-height: 1.5;} .contactBlock.studio p.adress br { display: none;}} /* テキスト調整 */
@media (max-width: 970px) {  .contactBlock.studio h6 { margin: 3px 0 8px;}} /* テキスト調整 */

@media (max-width: 960px) { 
 .contactBlock.studio { max-height: auto; padding-left: 330px;} 
 .contactBlock.studio p.adress br { display: inline;}
 .contactBlock.studio h6 { margin: 10px 0 20px; }
}

@media (max-width: 728px) { 
 .contactBlock.studio { max-height: auto; padding: 40px 30px 20px; line-height: 0; background-size: cover;}
 .contactBlock.studio p.adress { padding: 15px 50px 25px; background-color: rgba(255,255,255,0.8);}
 .contactBlock.studio h6 { margin: 0; padding: 10px 0 8px 20px; color: #444; border-left-color: #6e7d8e; background-color: rgba(255,255,255,0.8); display: block;}

}

/* footer */
footer { position: fixed; width: 15%;bottom: 30px; }
#footer { width: 15%; }
#footer small { font-family: hashimotoMenu, sans-serif; position: absolute; bottom: 30px; left: 50px; font-size: 14px; color: #333;}

@media (max-width: 960px) {
footer { width: 100%; position: static; padding: 20px 0;}
#footer { width: 100%; margin: auto; text-align: center;}
#footer small { margin: 0; position: static; }

}
@media (min-width: 961px) and (max-height: 700px) {
footer { opacity: 0; transition: .3s;}
}





/* modaal setting （ムービー）*/
.modaal-video .modaal-inner-wrapper { padding:0;} /* モーダル余白 */
.modaal-close:after, .modaal-close:before{ background:#ccc;} /* モーダルボタン */
.modaal-close:focus:after, .modaal-close:focus:before,
.modaal-close:hover:after, .modaal-close:hover:before{ background:#666;} /* モーダルボタン hover */
.modaal-video-container { max-width: 1200px !important;max-height: 900px !important;}

/* modal 2 - setting （お問い合わせ）*/
.modal2 { display: none; width: 100%; height: 100vh; position: fixed; top: 0; z-index: 30}
.modal-bg { width: 100%; height: 100vh; position: absolute; background: rgba(0, 0, 0, 0.8);}
.modal-content { width: 50%; max-width: 820px; height: 60%; padding: 40px 60px; position: absolute; top: 50%; left: 50%;
 transform: translate(-50%, -50%); overflow: scroll; line-height: 2; background: #fff; transition: .3s;}
body.fixed { width: 100%; height: 100%; position: fixed; left: 0;}/* modaling fix */

a.js-modal-close { margin: 20px auto 0; padding: 10px 10px 10px 15px; color: #000; text-decoration: none; text-align: center; display: block; transition: .3s;}
a.js-modal-close:hover { background: #ececec; transition: .3s;}

#contact .pTitle { margin-left: 0;}


@media (min-width: 961px) and (max-height: 800px) {
.modal-content { height: 70%;}
}

@media only screen and (max-width: 960px) { 
.modal-content { width: 95%; padding: 30px 40px; }
.modal-content .contactBlock { width: 95%; margin: auto; text-align: left;}
.modal-content p { text-align: center;}
.modal-content .contactBlock p { text-align: left;}
}

@media only screen and (max-width: 769px) { 
.modal-content { padding: 30px;}
.modal-content .contactBlock { width: 100%;}
.modal-content p { text-align: left; font-size: 90%;}
.modal-content .pTitle {  text-align: center; font-size: 20px;}
}