@charset "UTF-8";

/*
Theme Name: atelier-i
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.0
Requires PHP: 5.6
Version: 1.8.61
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/* Categories 01 to 03 are the basics. */

@import url('./layout.css?3');

.wrapper{ position: relative; }

.container{
  display: flex;
  justify-content: space-between;
  max-width: 1296px;
  max-width: 1310px;
  max-width: 1170px;
  padding: 5rem 1.4rem 0rem 5rem;
}

.maps iframe {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

.maps iframe .place-card { display: none !important; }

.instagram__box{
  border-left: #bfc0c0 1px solid;
}



.privacy{
  max-width: 588px;
  width: 100%;
  padding: 10px 15px;
  max-height: 100px;
  border: #999999 1px solid;
  
  overflow-y: auto;}

  .privacy,
  .privacy *{ font-size: 1.4rem; }

  .privacy::-webkit-scrollbar{
    width: 13px;
    background-color: #B8B8B8;
  }
  .privacy::-webkit-scrollbar-thumb{
    background-color: #717171;
    border: solid 6px #B8B8B8;
  }

/*.home .container{ padding-top: 3rem; }*/



html, body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 'Noto Sans JP', sans-serif;
  color: #333333;
}

header{
  position: fixed;
  width: 266px;
}

header .header__warpper{ 
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vh - 6rem);
  padding-top: 20px;
  overflow-y: auto;
}



header .header__warpper::-webkit-scrollbar{
  width: 1px;
  background-color: #ffffff;
}
header .header__warpper::-webkit-scrollbar-thumb{
  background-color: #ffffff;
  border: solid 1px #ffffff;
}

header .logo{ height:287px; }

header .logo img{ height: 288px; }




main{ width: calc(100% - 266px); padding-left: 266px; }

footer{ padding: 4rem 0 1rem 5rem; }
footer .copyright{ padding-left: 266px; width: calc(100% - 266px); max-width: 1920px; font-size: 1.2rem; letter-spacing: 0; }

.post-type-archive-works footer .copyright,
.home footer .copyright{ padding-left: 280px; width: calc(100% - 280px); }

.menu_icon{
  position: fixed;
  right: 0;
  top: 20px;

}


.menu_icon{
  z-index: 1000;
  padding: 0;
display: flex;
align-items: center;
}

.menu_icon .menu-trigger,
.menu_icon .menu-trigger span{ display: inline-block; transition: all .4s; box-sizing: border-box; }
.menu_icon .menu-trigger{ position: relative; width: 50px; height: 50px; }

.menu_icon .menu-trigger span { position: absolute; left: calc(50% - 12.5px); width: 25px; height: 1px; background-color: #595757; }
.menu_icon .menu-trigger span:nth-of-type(1) { top: 35%; }
.menu_icon .menu-trigger span:nth-of-type(2) { top: 58%; }
.menu_icon .menu-trigger span:nth-of-type(3) { bottom: 16%; }



.menu_icon .menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
  top: 33%;
}

.menu_icon .menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}

.menu_icon .menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-9px) rotate(45deg);
  transform: translateY(-6px) rotate(45deg);
  bottom: 35%;

}



.page__title{ display: flex; }
.page__title h2{ max-width: 266px; width: 100%; margin-right: 1.4rem; margin-left: 1.4rem; font-size: 1.8rem; }

.contact__form dl{ display: flex; margin-top: 2.5rem; width: 100%; }

.contact__form dl dt{ max-width: 150px; width: 100%; margin-right: 1.4rem; text-align: left; color: #595757; margin-left: 175px; }

.contact__form dl dd{ width: calc(100% - 308px); }
.contact__form dl dd input[type="text"], 
.contact__form dl dd input[type="tel"], 
.contact__form dl dd input[type="email"], 
.contact__form dl dd input[type="password"], 
.contact__form dl dd input[type="date"], 
.contact__form dl dd input[type="url"], 
.contact__form dl dd input[type="number"]{ max-width: 308px; width: 100%; border: none; border-bottom: #898989 1px solid; font-size: 1.6rem; padding: 3px 7px; }

.contact__form dl dd textarea{ max-width: 588px; width: 100%; font-size: 1.6rem; }


.contact__form .button{ margin-left: 339px; margin-top: 52px; }

.contact__form .button input{ width: 100%; max-width: 280px; display: flex; justify-content: center; align-items: center; line-height: 1; font-size: 1.4rem; height: 28px; border: #595757 1px solid; background-color: #ffffff; color: #333333; }



.contact__form__confirm .button .btnSend{ margin-bottom: 15px; background-color: #595757; color: #ffffff; border: #595757 1px solid; }





.works__inner{ display: flex; justify-content: flex-start; }


.works__information{ max-width: 238px; width: 100%; margin-right: 28px; margin-left: 14px; }
.works__information h2{ margin-bottom: 3.1rem; font-size: 1.6rem; }


.photo{ max-width: 546px; width: 100%; }
.photo img{ max-width: 100%; }
.photo .p:not(:last-child){ margin-bottom: 1.4rem; }

.detail{ margin-top: 6.0rem; }
.detail dl{ display: flex; }
.detail dl dt{ width: 80px; }
.detail dl dd{ width: calc(100% - 80px); }

.contact__form__confirm dl dd{ border-bottom: none; }

.contact__form__confirm .privacy__box{ display: none; }


div.icon{ margin-bottom: 7px; margin-left: 28px; }
div.icon img{ width: 20px; }


.sbi_item:nth-last-of-type(3n){ padding-right: 0; }


#sbi_images{ padding: 0 !important; }


#sb_instagram.sbi_col_3 #sbi_images .sbi_item{ padding-left: 14px !important; padding-top: 14px !important; max-width: 266px; width: 100%;}




.works__list{ display: flex; flex-wrap: wrap; }


.works__list a{     max-width: 406px;
  width: 100%; }

.works__list a{ margin-left: 14px; }

.works__list a img{ max-width: 100%; width: 100%; height: 100% !important; object-fit: cover; }

.works__list a dl dd{ line-height: 1.75; margin-top: .3rem; margin-bottom: 1.0rem; }

.profile h3{ font-size: 1.6rem; font-weight: 700; margin-bottom: 1.4rem; line-height: 1; }
.profile h3 span{ display: block; font-size: 1.4rem; font-weight: 400; }


.profile .katagaki{ font-size: 1.4rem; line-height: 1; }

.profile .face{ max-width: 266px; margin-top: 24.5px; margin-bottom: 24.5px; }
.profile .face img{width: auto !important; height: auto !important; max-width: 100%; }

.profile__list dl{ display: flex; }
.profile__list dl dt{ width: 70px; }
.profile__list dl dd{ width: calc(100% - 70px); }


.contact__form__top{ margin-left: 294px; }


.office_katagaki{ margin-bottom: 24.5px; line-height: 1; }


.single footer .copyright{ margin-left: 1.4rem; }


.office h3{ font-size: 1.6rem; font-weight: 700; margin-bottom: 14px; line-height: 1; }



.pagetop{ position: fixed; bottom: 2.2rem; right: 2.2rem; opacity: 0; visibility: hidden;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
margin: 0;
width: 27px;
z-index: 10;
}
.pagetop.active{ opacity: 1; visibility: visible; }




.contact__form .privacy dl{ display: block; }
.contact__form .privacy dl dt{ width: 100%; max-width: inherit; margin: 0; font-weight: 700; }
.contact__form .privacy dl dd{ padding-left: 1.6rem; width: calc(100% - 1.6rem); }




#gmap,
#gmapsp{ width: 100%; height: 350px; }


@media screen and (min-width: 901px) {

  .works__list a dl dt{ max-height: 266px; overflow: hidden; height: 266px; }
  #sb_instagram.sbi_col_3 #sbi_images .sbi_item:nth-child(1),
  #sb_instagram.sbi_col_3 #sbi_images .sbi_item:nth-child(2),
  #sb_instagram.sbi_col_3 #sbi_images .sbi_item:nth-child(3){ padding-top: 0 !important; }

}

@media screen and (max-width: 1145px) and (min-width: 901px) {

    .page__title h2{ margin-bottom: 12px; }
    .page__title h2{ max-width: 130px; }


    .contact__form dl dt{ max-width: 135px; }
    .contact__form dl dd{ width: calc(100% - 135px); }

    .contact__form dl dd input[type="text"], .contact__form dl dd input[type="tel"], .contact__form dl dd input[type="email"], .contact__form dl dd input[type="password"], .contact__form dl dd input[type="date"], .contact__form dl dd input[type="url"], .contact__form dl dd input[type="number"]{
      max-width: inherit;
    }
    .contact__form .button{ margin-left: 163px; }

    .works__information{ max-width: inherit; }
    .works__inner{ display: block; }

    .works__list a{ max-width: calc(50% - 14px); }



}



.maps{ width: 100%; }


.navigator{ margin-top: 5.5rem; }
.navigator ul li a{ font-size: 1.4rem; line-height: 1; display: block; padding: .7rem 0; }

.home .navigator ul li.ig{ background: url('./assets/images/arrow.svg') no-repeat 100% 60% / 180px auto; }


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


  .contact__form__top{ margin-left: 0; }

  .works__list a{ margin-left: 0; }
  .works__list a dl dd{ margin-bottom: 0.7rem; }

  .works__information{ margin: 0; }

  .navigator ul li.ig{ background: none !important; }


  .contact__form dl dd{ width: 100%; }

  .works__list{ display: block; }

  .instagram__box{ padding: 0 40px; }

  div.icon{ margin-left: 40px; padding-top: 1rem; }

  header .header__warpper{ padding-top: 0; }
  .home main{ padding-bottom: 0; }
  .home .container{ padding-top: 0; }
  #sb_instagram.sbi_col_3 #sbi_images .sbi_item{ padding-left: 0 !important; max-width: inherit; width: 100%; }
  #sb_instagram.sbi_col_3 #sbi_images .sbi_item:first-child{ padding-top: 0 !important; }


  .instagram__box{ border: none; }


    header .logo{ height: 85px; display: flex; 
      align-items: flex-end;
      margin-left: 40px; }
    header{ position: absolute;  width: 100%; height: 47px; }

    header .header__warpper{ height: auto; }

    .container{ padding: 0; display: block; }
    
    main{ padding-left: 0; width: 100%;  padding-bottom: 50px; padding-top: 100px; }


    header .logo img{ height: 48px; }

    .page__title{ display: block; }
    
    .inner{ padding: 0 40px; }

    .page__title h2{  margin-bottom: 5px; max-width: 100%; }


    .contact__form dl{ display: block; }

    .contact__form dl dt{ max-width: 100%; margin-bottom: 5px; margin-left: 0; }

    .contact__form dl dd input[type="text"], .contact__form dl dd input[type="tel"], .contact__form dl dd input[type="email"], .contact__form dl dd input[type="password"], .contact__form dl dd input[type="date"], .contact__form dl dd input[type="url"], .contact__form dl dd input[type="number"]{
      max-width: 100%;
    }

    .contact__form dl dt{ text-align: left; }


    .contact__form dl dd textarea{ max-width: inherit; }


    .contact__form .button{ margin-left: 0; margin-top: 30px; }
    .contact__form .button input{ max-width: 100%; }


    .contact__form .button input{ height: 42px; }


    .navigator{ position: fixed; width: 100%; 
      z-index: 1;
      position: fixed;
      width: 100%;
      height: calc(100vh);
      background-color: #ffffff;
      padding-top: 100px;
    right: -100%;transition: .5s all;
    margin-top: 0;
    top: 0;
    }
    

    .navigator.open{ right: 0;transition: .5s all; }
      
    .navigator ul li a{ display: block; padding-right: 25px; text-align: right; padding: .9rem 40px 2% .9rem; font-size: 1.8rem; }



    .works__list img{ max-width: 100%; }

    .works__inner{ padding: 0 40px; flex-direction: column-reverse; }

    .works__information{ max-width: inherit; }

      
    .photo h2{ margin-bottom: 14px; }
    .photo .p:not(:last-child){ margin-bottom: 14px; }

    .description{ margin-top: 14px; }



    .page__title h2{ margin-left: 0; }
    .profile .face{ max-width: 100%; margin-top: 1rem; margin-bottom: 1rem; }



    .pagetop{ width: 2.4rem; right: 1.3rem; }

    footer{ padding: 1em 40px; text-align: left; }
    footer .copyright{ padding: 0 !important; text-align: center; }
}