@charset "UTF-8";
/*共通部分
-------------------------*/
html{
  width: 100vw;
  font-family: "Zen Old Mincho", serif;
  font-size: 16pt;
  color:#4D4D4D;
  background-color: #fceeee;
  text-align: center;
}
h2{
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-size: 48pt;
  color:#4d4d4d;
  text-shadow: #9f957970 0 0 10px;
}
h3{
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-size: 36pt;
  margin-top: 150px;
  margin-bottom: 100px;
}
h4{
  font-family: "Kiwi Maru", serif;
  font-weight: 400;
  font-size: 18pt;
  margin-bottom: 15px;
}
.wrapper{
  width:85vw;
  margin: 0 auto;
}
a{
  text-decoration: none;
}
a:hover{
  color:#fff;
}
.hamburger{
  display: none;
}
button:hover{
  background-color: #fff;
}
/*===================================================
 index---header 
=====================================================*/
.index_html{
  scroll-padding-top: 180px;
}
.index_header{
  width:100vw;
  background-color: #F2E0BD;
  position: fixed;
  height:100px;
  align-content: center;
  z-index: 50;
}
.header_menu{
  display: flex;
  justify-content: space-between;
  align-content: center;
}
h1{
    align-content: center;
}
h1 a{
  align-items: center;
}
.header_logo{
  width:200px;
}
.header_nav{
  display: flex;
  gap:50px;
  align-content: center;
  font-size: 1.1rem;
  font-weight: 100;
}
.header_nav_menu{
    align-content: center;
}
.header_nav ul{
  list-style: none;
  display: flex;
  gap:30px;
}

.header_nav ul li a{
  color: #4D4D4D;
  font-weight: 600;
}
.header_nav ul li a:hover{
  color: #fff;
}

.header_contact{
  align-content: center;
}
.header_contact_frame{
  align-content: center;
}
.header_contact a{
  display: block;
  padding:10px 30px;
  background: #F2B441;
  color:#4D4D4D;
  font-weight: 600;
  font-size: 0.9em;
  text-align: center;
  border-radius: 10px;
  border:3px solid #F2B441;
}
.header_contact a:hover{
  background: #fff;
  border:3px solid #F2B441;
}

/*===================================================
  index---main 
=====================================================*/
.index_main{
  padding-top: 100px;
  width:100vw;
}
/* --- fv ---------------------------------------*/
.fv{
  width:100vw;
  height:calc(100vh - 100px);
  background-image: url("../img/fv.jpg");
  background-color: #9f9579;
  background-blend-mode: overlay;
  background-repeat: no-repeat;
  background-size: cover;
}
.fv_text{
  width:auto;
  height:auto;
  position: absolute;
  top: 55%; /* 垂直方向の中央寄せ */
  left: 50%; /* 水平方向の中央寄せ */
  transform: translate(-50%, -50%); /* 中央に配置 */
}
.fv_2nd{
  font-size: 24pt;
  font-weight: 500;
  margin-bottom: 50px;
}

.fv_button{
  display: inline;
  padding:10px 50px;
  background: #F2B441;
  color:#4D4D4D;
  font-weight: 600;
  font-size: 0.9em;
  border-radius: 30px;
  border:3px solid #F2B441;
}
.fv_button:hover{
  background: #fff;
  color:#4D4D4D;
}
/* --- about ---------------------------------------*/
.about{
padding: 150px 0 50px;
line-height:2;
}


/* --- services ---------------------------------------*/
.h3_services::after {
  z-index: -1;
  font-family: "Playwrite NL", cursive;
  font-size: 48pt;
  color:#8DA67B7b;
  content: 'Services';
  position: absolute;
  transform: translate(-90%, -50%); 
  /* 中央に配置 */
  white-space: nowrap; /* テキストの折り返し防止 */
}
.services_contents{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap:50px;
  justify-content: center;
  margin-bottom: 30px;
}
.services_item{
  width:300px;
  padding:30px 30px;
  gap:30px;
  background-color: #8DA67B;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}
.services_item_text{
  text-align: left;
}

/* --- projects ---------------------------------------*/
.wave {
  position: relative;
  width: 100vw;
  height: 350px;
  margin: 0 auto;
  overflow: hidden;
  z-index: -2;
}
.wave::after {
  position: absolute;
  top: 50%;
  left: -100%;
  width: 300%;
  aspect-ratio: 1 / 1;
  transform-origin: center center;
  background-color: #8DA67B;
  border-radius: 50% 55% / 50% 45%;
  animation: anime linear 40s infinite;
  content: "";
  }
  @keyframes anime {
  from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
.wave::before {
  position: absolute;
  top: 70%;
  left: -190%;
  width: 500%;
  aspect-ratio: 1 / 1;
  transform-origin: center center;
  background-color: #F2B441;
  border-radius: 45% 50% / 50% 45%;
  animation: anime linear 60s infinite;
  content: "";
  }
  @keyframes anime {
  from {
        transform: rotate(100deg);
    }
    to {
        transform: rotate(460deg);
    }
}
.projects{
  background-color: #8DA67B;
  z-index: -1;
  height:500px;
  margin-top: -120px;
  padding-top: 120px;
}
.h3_projects{
  color:#4d4d4d;
  background-color: #4d4d4d00;
  margin-top: -70px;
}
.h3_projects::after {
  z-index: -1;
  font-family: "Playwrite NL", cursive;
  font-size: 48pt;
  color:#F2B441;
  content: 'Projects';
  position: absolute;
  transform: translate(-70%, -60%);   /* 中央に配置 */
  white-space: nowrap; /* テキストの折り返し防止 */
}
.projects_slider{
  width:100vw;
  background-color:#8DA67B;
  padding: 100px 0;
  margin-top: -100px;
  overflow: hidden;
}
.pss{
  width:380px;
  margin: 0 15px;
}
.slick-prev, .slick-next{
  position:absolute;
  z-index:100;
  top:50%;
  cursor:pointer;
  transform:translateY(-50%);
  color:#000;  
}
.slick-prev{
    left: 3%;
}
.slick-next{
    right: 3%;
}
.projects_button{
  background-color: #8DA67B;
  align-items: center;
}
.more{
  width:200px;
  background-color: #F2B441;
  padding:10px 20px;
  border-radius: 25px;
  border:3px solid #F2B441;
}
.wave2 {
  position: relative;
  width: 100vw;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
  z-index: -2;
}
.wave2::after {
  position: absolute;
  bottom: 50%;
  left: -100%;
  width: 300%;
  aspect-ratio: 1 / 1;
  transform-origin: center center;
  background-color: #8DA67B;
  border-radius: 50% 45% / 40% 45%;
  animation: anime linear 40s infinite;
  content: "";
  }
  @keyframes anime {
  from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
.wave2::before {
  position: absolute;
  bottom: 80%;
  left: -190%;
  width: 500%;
  aspect-ratio: 1 / 1;
  transform-origin: center center;
  background-color: #F2B441;
  border-radius: 45% 50% / 45% 40%;
  animation: anime linear 60s infinite;
  content: "";
  }
  @keyframes anime {
  from {
        transform: rotate(100deg);
    }
    to {
        transform: rotate(460deg);
    }
}
/* --- process ---------------------------------------*/
.h3_process {
  margin-top:50px;
  margin-bottom: 50px;
}
.h3_process::after {
  z-index: -1;
  font-family: "Playwrite NL", cursive;
  font-size: 48pt;
  color:#8DA67B7b;
  content: 'Process';
  position: absolute;
  transform: translate(-90%, -50%); /* 中央に配置 */
  white-space: nowrap; /* テキストの折り返し防止 */
}
.process_steps{
  display: flex;
  flex-direction: column;
  gap:50px;
  align-items: center;
  margin-bottom: 200px;
}
.step{
  width: 1080px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  gap:30px;
}
.step_text{
  width:300px;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-top: 50px;
}
.step2{
  width: 1080px;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-around;
  gap:30px;
}
/* --- prices ---------------------------------------*/
.h3_prices{
  margin-bottom: 150px;
}
.h3_prices::after {
  z-index: -1;
  font-family: "Playwrite NL", cursive;
  font-size: 48pt;
  color:#8DA67B7b;
  content: 'Prices';
  position: absolute;
  transform: translate(-75%, -50%); /* 中央に配置 */
  white-space: nowrap; /* テキストの折り返し防止 */
}
.prices_contents{
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap:50px;
  margin-bottom: 200px;

}
.prices_list{
  width:300px;
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: #8DA67B7b;
  border-radius: 10px;
  padding:10px 15px;
  align-items: center;
  padding-bottom: 30px;
}
.prices_img{
  width:100px;
  margin: -80px 0 0 -80px;
}
.prices_detail{
  font-size: 12pt;
  text-align: left;
}
/* --- voices ---------------------------------------*/
.h3_voices::after {
  z-index: -1;
  font-family: "Playwrite NL", cursive;
  font-size: 48pt;
  color:#8DA67B7b;
  content: 'Voices';
  position: absolute;
  transform: translate(-110%, -50%); /* 中央に配置 */
  white-space: nowrap; /* テキストの折り返し防止 */
}
.voices_contents{
  display: flex;
  flex-direction: column;
  width:fit-content;
  margin: 0 auto;
  gap:50px;
    margin-bottom: 200px;
}
.voices_list{
  display: flex;
  justify-content: center;
  align-items: center;
  /* flex-wrap: wrap; */
}
.voices_img{
  width:100px;
  height:100px;

}
.speechBubble {
  max-width: 450px;
  position: relative;
  display: inline-block;
  margin-left: 16px;
  padding: 16px;
  border-radius: 12px;
  background-color: #F2E0BD;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

.speechBubble::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-style: solid;
  border-width: 8px 16px 8px 0;
  border-color: transparent #F2E0BD transparent transparent;
  translate: -100% -50%;
  transform: skew(0, -10deg);
  transform-origin: right;
}

.voices_list2{
  display: flex;
  flex-direction: row-reverse;
}
.speechBubble2 {
  max-width: 450px;
  position: relative;
  display: inline-block;
  margin-right: 16px;
  padding: 16px;
  border-radius: 12px;
  background-color: #F2B441;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

.speechBubble2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #F2B441;
  translate: 100% -50%;
  transform: skew(0, -10deg);
  transform-origin: left;
}

/* --- contact ---------------------------------------*/
.h3_contact::after {
  z-index: -1;
  font-family: "Playwrite NL", cursive;
  font-size: 48pt;
  color:#8DA67B7b;
  content: 'Contact';
  position: absolute;
  transform: translate(-80%, -50%); /* 中央に配置 */
  white-space: nowrap; /* テキストの折り返し防止 */
}
.h3_contact{
  margin-bottom: 50px;
}
.contact_contents{
  width:1080px;
  margin: 0 auto;
}
.contact_choice{
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap:50px;
  text-align: center;
}
.contact_form_a{
  width:fit-content;
  font-size: 16pt;
  font-family: "Kiwi Maru", serif;
  color:#4D4D4D;
  background-color: #F2B441;
  padding: 15px 30px;
  border-radius: 15px;
  border:3px solid #F2B441;
}
.contact_form_text{
  font-family: "Kiwi Maru", serif;
  color:#4D4D4D;
  font-size: 12pt;
  text-align: center;
  padding:10px 0 5px;

}
.contact_line{
  width:400px;
  margin: 0 auto;
}
.contact_line_a{
  width:400px;
  font-size: 16pt;
  font-family: "Kiwi Maru", serif;
  color:#4D4D4D;
  background-color: #F2B441;
  padding: 15px 30px;
  border-radius: 15px;
  text-align: left;
  border:3px solid #F2B441;
}
.contact_line_icon{
  width:25px;
}
.contact_line_text{
  width: 400px;
  font-family: "Kiwi Maru", serif;
  color:#4D4D4D;
  font-size: 12pt;
  text-align: left;
  /* padding-left: 30px; */
  padding:10px 0 5px 30px;
}
.linefriend{
  width:100px;
  border-radius: 5px;
  position: relative;
  top: -90px ;
  left: 130px;
}
.sp_shown{
  display: none;
}

.contact_top{
 text-align: center; 
 margin-bottom: 100px;
}
.contact_form{
 width:fit-content;
  margin: 0 auto;
  text-align: left;
}
.linktopp{
  text-decoration: underline;
  color:#4d4d4d;
}
.textlines{
  border: 1px solid #d9ca77;  /* 枠線 */
  border-radius: 10px;   /* 角丸 */
  padding: 0.5em;          /* 内側の余白量 */
  background-color: #b3cfad;  /* 背景色 */
  font-size: 1em;          /* 文字サイズ */
  line-height: 1.2;        /* 行の高さ */
}

.tocontact{
  margin-top: 15px;
}
/* --- サイドバー ---------------------------------------*/
.sidebar{
  width:100px;
  width:fit-content;
  position:fixed;
  right: 0;
  top:60%;
  background-color: #8DA67B;
  padding: 10px;
  text-align: center;
  border-radius: 10px 0 0 10px;
}
.sidebar:hover{
  background-color: #bcdc96;
}
.sidebar_a{
  color:#4D4D4D;
  font-family: "Kiwi Maru", serif;
}
.sidebar_a:hover{
color: #4d4d4d;
}
.sidebar_line{
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  gap:15px;
}
.sidebar_line_logo{
  width:50px;
}
.sidebar_line_text{
  writing-mode: vertical-rl;
  margin: 0 auto;
}

/* --- footerエリア ---------------------------------------*/
.footer_contents{
  width:100vw;
  background-color: #F2E0BD;
  height:fit-content;
  padding: 100px 0 15px;
  text-align: center;
}
.footer_box{
  width:650px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap:15px;
  margin: 0 auto;

}
.footer_item{
  width:300px;
  text-align: center;
}
.footer_logo{
  width:200px;
}
.footer_right{
  display: flex;
  flex-direction: column;
  justify-content:end;
  gap:30px;
}
.footer_sns{
  display: flex;
  flex-direction: row;
  gap:30px;
}
.sns_icon{
  width:60px;
  height: 60px;
}
.pp{
  color:#4D4D4D;
  font-size: 0.8rem;
}
/* --- footer ---------------------------------------*/
.index_footer{
  background-color: #F2E0BD;
  text-align: center;
  padding-top: 5%;
  padding-bottom: 1%;
  line-height: 1;
  font-size: 12pt;
}

/*===================================================
 portfolio
=====================================================*/
.portfolio_html{
    font-size: 100%;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.7;
    color:#3d3d3d;      
    background:
      radial-gradient(circle at 85% 15%, rgba(193, 230, 119, 0.3) 0%, transparent 45%), /* モスグリーン：右上へ移動 */
      radial-gradient(circle at 35% 40%, rgba(252, 208, 159, 0.312) 0%, transparent 50%), /* オレンジ：中央やや左上 */
      radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.7) 0%, transparent 50%),  /* 白：下中央 */
      radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),  /* 白：左上 */
      linear-gradient(180deg, #e9fbff 0%, #fefefe 100%); /* 全体のベース */
    background-attachment: fixed; /*スクロール時に固定。*/
}
.portfolio_footer{
  display: none;
  text-align: center;
  padding-top: 5%;
  padding-bottom: 1%;
  line-height: 1;
  font-size: 12pt;
}

/*main
-----------------------------*/
.portfolio_main{
    display: flex;
    justify-content: center;
    /* padding:5vh 5vw; */
}


/* main1 左：固定ページ
---------------------------- */
.main1{
    width:auto;
    max-width:30vw;
    max-height: 90vh;
    text-align: center;
    padding: 20vh 0 0;
    background-color: rgba(255,255,255,0.05);
    position: sticky;
    top: 0;
}
.portfolio_logo{
  width:auto;
  max-width: 300px;
  min-width: 250px;
}

.portfolio_footer_left{
    width: 25vw;
    text-align: center;
    font-size: 1rem;
    margin: 0 auto;
    padding-top: 5%;
    line-height: 1;
    font-size: 12pt;
}

/* center line
---------------------------- */
.centerline{
    height:90vh;
    border-right: 2px solid #f3f3f3;
    position: sticky;
    top: 5vh;
}


/* main2　右：固定ページ
---------------------------- */
.main2{
    width: 60vw;
    padding-left: 3%;
}
.inner{
    width: 100%;
    padding-top: 10vh;
    text-align: center;
}

.box {
  padding-top: 5%;
  width: auto; /* 幅を内容に合わせる */
  max-width: 55vw; /* 必要に応じて最大幅を指定 */    
  display: flex;
  flex-wrap: wrap; 
  gap: 0 3%;
  margin: 0 auto;
  list-style-type: none;
  justify-content: center;
}
.box-item {
  width: 200px;
  height: 200px;
  margin-top: 10%;
  position: relative; /* ここが重要 */
  overflow: hidden;
}

.box-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: 0.3s ease;
  border-radius: 3%;
}

.box-title {
  position: absolute;
  top: 0; /* 画像の上に完全に重ねる */
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  opacity: 0;
  transition: 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2; /* 重ね順を上に */
  border-radius: 3%;
}

.box-item:hover .box-title {
  opacity: 1;
}

/*---ソート------------ */
/*ラベルのチェックリストの文字色*/
:root {
  --color-red: #e3e3e3;
  --color-blue: #e3e3e3;
  --color-yellow: #e3e3e3;
  --color-green: #e3e3e3;
}
.sort-contents {
  width: 90%;
  padding: 1em;
  margin: 10vh auto 0;
}
input[name="sort"] {
  display: none;
}
.inner sort-contents label {
  display: inline-block;
  font-size: 1.1rem;
  cursor: pointer;
}
.title
{
  font-size: 1.7rem;
  color:#3d3d3d;
  padding-bottom: 3vh;
}
/*ラベルのチェックリスト　マウスホバー時の文字色*/
label:hover,
input[name="sort"]:checked + label {
  color: #e3e3e3;
}
input[name="sort"]:checked + label {
  cursor: default;
}
label[for="sort-red"]:hover,
#sort-red:checked + label {
  color: var(--color-red);
}
label[for="sort-blue"]:hover,
#sort-blue:checked + label {
  color: var(--color-blue);
}
label[for="sort-yellow"]:hover,
#sort-yellow:checked + label {
  color: var(--color-yellow);
}
label[for="sort-green"]:hover,
#sort-green:checked + label {
  color: var(--color-green);
}

/*===================================================
 work
=====================================================*/
.work{
    background:
      radial-gradient(circle at 85% 15%, rgba(223, 247, 255, 0.25) 0%, transparent 45%), /* モスグリーン：右上へ移動 */
      radial-gradient(circle at 12% 18%, rgba(193, 230, 119, 0.3) 0%, transparent 50%), /* 水色：左上 */
      radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.7) 0%, transparent 50%),  /* 白：下中央 */
      radial-gradient(circle at 35% 40%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),  /* 白：中央やや左上 */
      linear-gradient(180deg, #ffffff 0%, #fefefe 100%); /* 全体のベース */
    background-attachment: fixed; /*スクロール時に固定。*/
    top: 0;
    justify-content: center;
    align-items: center;
    /* padding: 10%; */
}
.portfolio1{
    display: flex;    
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap:15px;
}
.works-title{
  font-size: 1.2em;
  font-weight: 500;
  margin-top: 1%;
  padding-top: 1%;
}
.works1{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:50px;
    margin-top: 15px;
}
.works1_image{
    width:35%;
    min-width:300px;
}
.works10_image{
    width: 80%;
}
.works-detail{
  width:80%;
  font-weight: 500;
  text-align: center;
  font-size: 0.8em;
}

.works_footer{
  margin-top: 15px;
  text-align: center;
  line-height: 1;
  font-size: 12pt;
}

/* ✕ボタンのスタイル */
.close-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: #3d3d3d;
  /* color: #fff; */
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;

  display: flex;              /* ← 追加 */
  align-items: center;        /* ← 縦方向中央揃え */
  justify-content: center;    /* ← 横方向中央揃え */
  padding: 0;    }

.close-btn:hover {
  background: #8d8d8d;
}
/*===================================================
CONTACTページ
=====================================================*/
.contact
{
  width: 90%;
  margin: 0 auto;
  text-align: center;
}
.contact_top
{
  margin: 0 auto;
}
.contact_form
{
  width: 70%;
  margin: 0 auto;
  font-size: 1rem;
  text-align: center;
  margin-bottom: 2%;
}
input, textarea{
 background-color: #efefef;
}

.con_pri {
    max-width: 85%;
    margin: 0 auto;
    text-align: left;
    font-size: 16px;
}
.con_pri .box_pri {
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #8DA67B;
    background: #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .box_pri{
    padding:0 5%;
  }
.box_check
{
  color: #3d3d3d;
  margin-top: 1%;
}
.check{
  font-size: 0.9rem;
}
.box-num{
  font-size: 0.8rem;
  margin-top: 5%;
}
.txt{
  padding-left: 3%;
}
.box_list{
  font-size: 0.7rem;
   list-style-position: inside;
   padding-left: 5%;
   
}
.box_list_list{
  font-size: 0.7rem;
  list-style-position: inside;
  padding-left: 8%;
}
.agree{
  margin-bottom: 5%;
}
.tocontact{
  color:#f3f3f3;
  font-size: 1rem;
  border-radius: 10px;
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 10px 30px;   /* 余白       */
  background    : #F2B441;     /* 背景色     */
  color         : #4d4d4d;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  border        : 3px solid #F2B441;      /* 枠の指定 */
  margin-bottom: 5%;
}
.toctnact:hover{
  box-shadow    : none;        /* カーソル時の影消去 */
  background    : #fff;     /* 文字色     */
}
.required{
  color:#d97777;
  font-size:0.8em;
  align-items: start;
}
.contact_h4{
  margin-top: 10px;
}
.contact_footer{
  font-size: 12pt;
  margin-bottom: 3px;
}

/*===================================================
php コンタクト ページ遷移
=====================================================*/
.php{
  width:100%;
  margin: 0;
  padding:5% 10%;
  text-align: center;
  display: flex;            /* 追加 */
  flex-direction: column;
  justify-content: center;  /* 横方向中央 */
  align-items: center;      /* 縦方向中央 */
}
.php form{
  width:100%;
  margin: 0 auto;
}
.php_table{
  width: 90%;
  margin: 0 auto;           /* テーブル自体を中央に */
  color: #3d3d3d;
  border-collapse: collapse;
  border: 1px solid #3d3d3d;
  background-color: rgba(243, 243, 243, 0.6);
}
.php_table th{
  background-color: #3d3d3d;
  color: #f3f3f3;
}
.php_table td {
  padding: 1% 2%;
  border: 1px solid #3d3d3d;
}
.php_table td, th{
  display: block;         /* ←縦に並べる */
}

/* privacy policy
-----------------------------*/
.privacypolicy{
  width:80%;
  margin: 0 auto;
  font-size: 12pt;
}
.pp_main{
  display: block;
  padding: 30px 50px;
  text-align: center;
}
.con_pri2 {
    max-width: 90%;
    margin: 50px auto 0;
    text-align: left;
    /* font-size: 1.5em; */
}

@media screen and ( max-width:1080px) { 
/*　画面サイズが1080pxまではここを読み込む　*/
.wrapper{
    width:100vw;
    /* padding: 0 30px; */
}
.header_nav{
  display: none;
}
h2{
  font-size: 24pt;
}

/* ここから下がハンバーガーメニューに関するCSS */
.hamburger{
  display: block;
}

/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 90px;
  width: 90px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 35px;
  border-radius: 3px;
  background: #F2F5F7;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 10px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 10px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.hamburger_nav{
  width: 350px;
  height: auto;
  position: fixed;
  top: 100px;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background-color: #F2E0BD;
  transition: .5s;
  padding: 50px 0 50px 30px;
}
.hamburger_nav a{
  font-family: "Kiwi Maru", serif;
  color:#4d4d4d;
  font-size: 16pt;
  font-weight: 500;
}

/* メニュー黒ポチを消す */
.nav_ul {
    width:150px;
}
.nav_list{
    list-style: none;
    border-bottom: #F2F5F7 1px dotted;
    padding:10px 0;

}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .hamburger_nav {
  left: 63%;/* メニューを画面に入れる */
}

.prices_img{
  margin: -30px 0 0 -150px;
}
.step{
width:auto;
}
.step2{
width:auto;
}
.step img, .step2 img{
  width:350px;
}
/* voices*/
.speechBubble, .speechBubble2{
max-width: 300px;
}


/* contact */
.php_table{
  font-size: 0.8rem;
}
.textlines{
width:300px;
}
/*footer*/
.footer_contents{
 padding-top: 50px;
}
.footer_box{
  width:auto;
}
/* sidebar*/
.sidebar{
  top:80%;
}
.sidebar_line_text{
display: none;
}
.contact_contents{
  width:auto;
}
.sp_shown{
  display: block;
}
.contact_line{
  width:300px;
  margin-bottom: 100px;
}
.contact_line_a{
  width:300px;
}
.contact_line_text{
  display: none;
}
.linefriend{
  display: none;
}
.contact_choice{
  gap:30px;
}
.fv_2nd{
  margin-top: 16px;
  font-size: 16pt;
}
.portfolio_html, .work {
  background: 
  linear-gradient(135deg, rgba(213, 245, 255, 0.5) 0%, rgba(255, 255, 255, 0.9) 30%, rgba(193, 230, 119, 0.4) 110%);
  background-attachment: fixed; /*スクロール時に固定。*/
}


/*main
-----------------------------*/
.portfolio_main{
  width:95vw;
  flex-flow: column;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
}

/* main1　左
---------------------------- */
.main1{
  width:95vw;
  max-width:95vw;
  position: relative;
  padding: 10vh 0 0;
  /* align-items: center; */
  text-align: center;
  margin: auto;
}
.portfolio_logo{
  width:250px;
  margin: auto;
}

.portfolio_footer_left{
  display: none;
}

/* center line
---------------------------- */
.centerline{
  display: none;
}
/* main2　右：固定ページ
---------------------------- */
.main2{
    width: 95vw;
    padding-left: 0;

}
.box {
    max-width: 95vw; /* 必要に応じて最大幅を指定 */    
    justify-content: space-evenly;
    gap: 0 1%;
}
/* privacypolicy
---------------------------- */
.privacypolicy{
  width:95%;
}
.con_pri {
    max-width: 95%;
}
.con_pri2 {
    max-width: 95%;
}

}


@media screen and (max-width:450px) { 
    /*　画面サイズが450pxまではここを読み込む　*/
/* portfolio
---------------------------- */
.works1_image{
  width:80%;
  text-align: center;
}
.work_credit{
  padding-top: 2%;
  text-align: center;
}
.portfolio_footer{
  display: block;
}
.sort-contents {
  padding: 0 10px;
}
.fc_text h2{
  font-size:16px;
}
.fv_2nd{
  font-size: 14pt;
}
.about{
font-size: 0.8em;
}

/* contact */
.php_table{
  font-size: 0.8rem;
}
/*header*/
.header_menu{
justify-content: space-around;
}
h2{
  font-size: 18pt;
}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .hamburger_nav {
  left: 45%;/* メニューを画面に入れる */
}
.step img, .step2 img{
  width:300px;
}
.voices_contents{
  width:auto;
}
.voices_img{
  width:80px;
  height: 80px;
}
.fv_button{
  padding:10px 30px;
  font-size: 0.8em;
}

}