@charset "UTF-8";

html {overflow-x: hidden;}
body {overflow-x: hidden;}

/*ヘッダーの記述*/
.header-container {
    position: fixed;
    top: 0;
    z-index: 10000;/*重なりを最上位へ*/
    width: 100%;
}

.header {
    background-color: transparent;
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 1% 4% 0;
    /*background-color: #F5C65F;*/
}

.logo {
  font-size: 40px;
  color: #fdf7ef;
  font-family: "manrope", sans-serif;
  line-height: 1;
  text-align: center;
  width: 175px;
  height: 175px;
  background-color: #664C32;
  border-radius: 50%;
}

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background-color: #664C32;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10000;/* 重なり順を一番上にする */
  cursor: pointer;
}

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

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

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

/* アイコンがクリックされたらアイコンの×印の背後の円の色変わる*/
#drawer_input:checked ~ .drawer_open {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: #fdf7ef;
}

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

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

#drawer_input:checked ~ .drawer_open span::after {
  background-color: #664C32;
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 9999;
  background: #664C32;
  transition: .5s;
  border-radius: 8vw;
}

/*メニュー内の記述*/
.nav_list {
    color: #fdf7ef;
    font-size: 32px;
    font-family: "manrope", sans-serif;
    margin: 20% 10%;
}

.nav_item {
    line-height: 2.5;
}


/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

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

/*アイコンがクリックされたらメニュー外が暗くなる*/
#drawer_input:checked ~ .close {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    /* 画面全体 */
    width: 100%;
    height: 100%;
    /* menu より下 */
    z-index: 9998;
    /* その他デザイン */
    background-color: rgb(232, 223, 213, 0.8);
    margin: 0;
}

/*メイン画像と文字の記述*/
.main {
    max-width: 100%;
    margin: auto;
    position: relative;
    /*background-color: #664C32;*/
}

.main-parallax_content{
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /*アニメーション使用しない場合
    background-position: center;
    background-size: cover;
    height: 100vh;*/
}

.main-img_bg_01 {
    background-image: url(../images/pixabay_cat-6569156_1280.jpg);/*トップ画像くつろぎ猫*/
}

.maintext {
    font-size: 48px;
    font-family: "manrope", sans-serif;
    color: #ffffff;
    position: absolute;
    top: 50%;
    right: 10%;
    text-align: center;
    /*background-color: #664C32;*/
    transform: translate(-10%, -50%);
    -webkit-transform: translate(-10%, -50%);
    -ms-transform: translate(-10%, -50%);
}

.maintext span {
    font-size: 40px;
}

/*見出し2の記述*/
h2 {
    font-size: 40px;
    color: #664C32;
    text-align: center;
    margin: 10% 0 5% 0;
}

/*Aboutの記述*/
.about {
    max-width: 80%;
    margin: auto;
    padding: 0 4%;
}

.about1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
    /*background-color: aqua;*/
}

.about2 {
    width: 100%;
    text-align: center;
    padding-left: 5%;
    /*background-color: rgb(221, 150, 18);*/
}

.about2 p {
    text-align: left;
    font-size: 16px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    line-height: 2;
    padding: 10% 14.6% 6%;
}

.about2 a {
    font-size: 16px;
    font-family: "manrope", sans-serif;
    color: #664C32;
    line-height: 2;
}

.about2 span {
    display: block;
    width: 95px;
    height: 1px;
    background-color: #664C32;
    margin: auto;
}

.about img {
    width: 100%;
    max-width: 450px;
    height: auto;
    object-view-box: inset(1700px 0 400px 40px);
    border-radius: 10%;
}

/*Worksの記述*/
.works {
    max-width: 80%;
    margin: auto;
    padding: 0 4%;
}

.works ul {
    display: grid;
    max-width: 100%;
    /*background-color: aqua;*/
    grid-template-columns: 1fr 1fr;
    gap: 30px 90px;
}

.works img {
    max-width: 100%;
    /*border-radius: 10%;*/ /*書き出し時に角丸の写真を入れる*/
    height: auto;/*WordPress用に追加*/
}

h3 {
    font-size: 24px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    margin: 20px;
    text-align: center;
}

.works-more-detail {
    text-align: right;
    /*background-color: rgb(124, 190, 130);*/
    margin: 5% 0;
}

.works-more-detail a {
    font-size: 16px;
    font-family: "manrope", sans-serif;
    color: #664C32;
    line-height: 2;
}

.works-more-detail span {
    display: block;
    width: 105px;
    height: 1px;
    background-color: #664C32;
    margin-left: auto;
}

/*Contactの記述*/
.contact {
    max-width: 100%;
    margin: auto;
    padding: 0 4%;
}

.contact1 {
    width: 50rem;
    height: 40rem;
    background-color:#F5C65F;
    border-radius: 50%;
    margin-bottom: 5%;
    margin-right: auto;
    margin-left: auto;
}

.contact1 h2 {
    margin: 0 0 3% 0;
}

.contact1 p {
    font-size: 20px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    text-align: center;
}

.contact-img-sunflower {
    max-width: 20%;
    transform: rotate(-70deg);
    display: block;
    margin-top: 12%;
    margin-bottom: -5%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: -8%;
}

.contact-img-coffee {
    max-width: 40%;
    transform: rotate(-90deg);
    display: block;
    margin: 0 auto;
    position: relative;
    top: -5%;
}

.contact1 button {
    font-size: 24px;
    color: #664C32;
    font-family: "Zen Kaku Gothic New", sans-serif;
    display: block;
    margin: auto;
    background-color: #fdf7ef;
    padding: 3% 9%;
    border-radius: 30vw;
    position: relative;
    top: -8%;
}

/* ホバー時のボタンスタイル */
.contact1 button:hover {
    background-color: #bebe71;
}

/*トップへ戻るボタンの記述*/
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 60px;
    bottom: 30px;
    background: #664C32;
    border: solid 2px #664C32;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 18px;
    width: 18px;
    border-top: 5px solid #FDF7EF;
    border-right: 5px solid #FDF7EF;
    transform: translateY(20%) rotate(-45deg);
}

/*コーヒーとひまわりのラインの記述*/
.img-line {
    display: grid;
    max-width: 100%;
    margin: auto;
    /*background-color: aqua;*/
    grid-template-columns: repeat(8,1fr);
}

.img-line-coffee {
    max-width: 80%;
}

.img-line-sunflower {
    max-width: 80%;
    transform: rotate(-30deg);
}

Footer {
    max-width: 80%;
    margin: auto;
    padding: 1% 4%;
    /*background-color: #F5C65F;*/
}

.footer-flex-container {
    display: flex;
    justify-content: center;
    gap: 5%;
    align-items: center;
    /*background-color: rgb(105, 204, 150);*/
}

.footer-flex-item-font1, .footer-flex-item-font2 {
    font-family: "manrope", sans-serif;
    color: #664C32;
    line-height: 1;
    text-align: center;
}

.footer-flex-item-font1 {font-size: 36px;}

.footer-flex-item-font2 {font-size: 20px;}

.copy-right {
    font-size: 14px;
    font-family: "manrope", sans-serif;
    color: #664C32;
    text-align: right;
    /*background-color: #7a9966;*/
}

/*ホームページへ飛ぶボタン（ホームのロゴ）の記述*/
/*html {
    scroll-behavior: smooth;
}*/

.pagetop-homelogo {
    font-family: "manrope", sans-serif;
    color: #664C32;
    line-height: 1;
    text-align: center;
    font-size: 24px;
    /*height: 40px;*/
    /*width: 50px;*/
    position: fixed;
    right: 60px;
    /*bottom: 30px;*/
    top: 180px;
    /*background: #664C32;*/
    /*border: solid 2px #664C32;*/
    /*border-radius: 5%;*/
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    z-index: 10000;
    /*background-color: #F5C65F;*/
}

/*.pagetop__arrow-homelogo {
    height: 36px;
    width: 36px;
    border-top: 2px solid #664C32;
    border-right: 2px solid #664C32;
    transform: translateY(-50%) rotate(135deg);
    border-radius: 5%;
}*/

/*コンタクトページへ飛ぶボタン（メールのロゴ）の記述*/
/*html {
    scroll-behavior: smooth;
}*/

.pagetop-maillogo {
    height: 40px;
    width: 50px;
    position: fixed;
    right: 67px;
    /*bottom: 30px;*/
    top: 250px;
    /*background: #664C32;*/
    border: solid 2px #664C32;
    border-radius: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow-maillogo {
    height: 36px;
    width: 36px;
    border-top: 2px solid #664C32;
    border-right: 2px solid #664C32;
    transform: translateY(-50%) rotate(135deg);
    border-radius: 5%;
}

/*profileの記述*/
.profile {
    max-width: 80%;
    margin: auto;
    padding: 140px 4% 0 4%;
    /*background-color: #288b73;*/
}

.profile1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
    /*background-color: #F5C65F;*/
}

.profile1 p {
    width: 100%;
    text-align: left;
    font-size: 16px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    line-height: 2;
    margin-right: 1.25%;
    /*background-color: aqua;*/
}

.profile1 img {
    width: 100%;
    max-width: 430px;
    height: auto;
    object-view-box: inset(1700px 0 400px 30px);
    border-radius: 9rem 0;
}

/*backgroundの記述*/
.background {
    max-width: 80%;
    margin: auto;
    padding: 0 4%;
    /*background-color: #288b73;*/
}

.background1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8.8%;
    /*background-color: #F5C65F;*/
}

.background1 img {
    width: 100%;
    max-width: 440px;
    height: auto;
    object-view-box: inset(1600px 0 980px 0);
    border-radius: 9rem 0;
}

.background1 p {
    width: 100%;
    text-align: left;
    font-size: 16px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    line-height: 2;
    /*background-color: aqua;*/
}

.background-futoji {
    color: #F5C65F;
    font-weight: bold;
}

/*Careerの記述*/
.career {
    max-width: 80%;
    margin: auto;
    padding: 0 4%;
    /*background-color: #98d4c5;*/
}

.career p {
    width: 73%;
    text-align: left;
    font-size: 16px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    line-height: 2;
    /*background-color: aqua;*/
    margin: auto;
}

.career-futoji {
    color: #F5C65F;
    font-weight: bold;
    line-height: 3;
    border-bottom: 1px solid #F5C65F;
    padding-bottom: 2px;
}

/*My favorite thingsの記述*/
.my-favorite-things {
    max-width: 80%;
    margin: auto;
    padding: 0 4%;
    /*background-color: #98d4c5;*/
}

.my-favorite-things1 {
    margin: 0 auto;
    display: grid;
    grid-template-columns:repeat(4,1fr);
    gap: 30px;
    place-content: center;
    place-items: center;
}

#popup1, #popup2, #popup3, #popup4, #popup5, #popup6, #popup7, #popup8 {
  display: none; /* label でコントロールするので input は非表示に */
}

.popup1-open, .popup2-open, .popup3-open, .popup4-open, .popup5-open, .popup6-open, .popup7-open,.popup8-open {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}

.popup1-open-img, .popup2-open-img, .popup3-open-img, .popup4-open-img, .popup5-open-img, .popup6-open-img, .popup7-open-img, .popup8-open-img {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    -moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.popup1-open-img {
    background-image: url(../images/pixabay_vw-bus-1845719_1280.jpg);
    background-size: 190%;
	background-position: 10% 90%;
}

.popup2-open-img {
    background-image: url(../images/pixabay_hamster-2072205_1280.jpg);
    background-size: 190%;
	background-position: 42% 40%;
}

.popup3-open-img {
    background-image: url(../images//pixabay_heart-8559831_1280.jpg);
    background-size: 135%;
	background-position: 50% 0%;
}

.popup4-open-img {
    background-image: url(../images/pixabay_oranges-2100108_1280.jpg);
    background-size: 150%;
	background-position: 50% 10%;
}

.popup5-open-img {
    background-image: url(../images/pexels-gary-barnes-6248797.jpg);
    background-size: 130%;
	background-position: 100% 84%;
}

.popup6-open-img {
    background-image: url(../images/pixabay_door-8453898_1280.jpg);
    background-size: 160%;
	background-position: 40% 50%;
}

.popup7-open-img {
    background-image: url(../images/pixabay_texture-4935189_1280.jpg);
    background-size: 160%;
	background-position: 90% 50%;
}

.popup8-open-img {
    background-image: url(../images/pixabay_guitar-4216326_1280.jpg);
    background-size: 168%;
	background-position: 10% 85%;
}

.popup1-overlay, .popup2-overlay, .popup3-overlay, .popup4-overlay, .popup5-overlay, .popup6-overlay, .popup7-overlay, .popup8-overlay {
  display: none; /* input にチェックが入るまでは非表示に */
}

#popup1:checked ~ .popup1-overlay, #popup2:checked ~ .popup2-overlay, #popup3:checked ~ .popup3-overlay, #popup4:checked ~ .popup4-overlay, #popup5:checked ~ .popup5-overlay, #popup6:checked ~ .popup6-overlay, #popup7:checked ~ .popup7-overlay, #popup8:checked ~ .popup8-overlay {
  display: block;
  z-index: 99999;
  background-color: rgba(243, 240, 238, 0.8); /*#f3f0ee(予定変更分)*/
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.popup1-window, .popup2-window, .popup3-window, .popup4-window, .popup5-window, .popup6-window, .popup7-window, .popup8-window {
  max-width: 80%;
  margin: auto;
  padding: 0 4%;
  width: 40rem;
  height: 40rem;
  background-color: #F5C65F;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup1-text1, .popup2-text1, .popup3-text1, .popup4-text1, .popup5-text1, .popup6-text1, .popup7-text1, .popup8-text1 {
  color: #664C32;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 20px;
  font-weight: bold;
  margin: 20% auto 10%;
  text-align: center;
  /*background-color: #98d4c5;*/
}

.popup1-titleflower-border, .popup2-titleflower-border, .popup3-titleflower-border, .popup4-titleflower-border, .popup5-titleflower-border, .popup6-titleflower-border, .popup7-titleflower-border, .popup8-titleflower-border {
  padding: 2% 0;
  margin: 0 15%;
  border-top: 3px dashed #664C32;
  border-bottom: 3px dashed #664C32;
  /*background-color: #f55f9e;*/
}

.popup1-titleflower, .popup2-titleflower, .popup3-titleflower, .popup4-titleflower, .popup5-titleflower, .popup6-titleflower, .popup7-titleflower, .popup8-titleflower {
    display: flex;
    align-items: center;
    /*background-color: aqua;*/
}

.popup1-titleflower img, .popup2-titleflower img, .popup3-titleflower img, .popup4-titleflower img, .popup5-titleflower img, .popup6-titleflower img, .popup7-titleflower img, .popup8-titleflower img{
    max-width: 100%;
    width: 15%;
    height: 15%;
    margin: auto;
    /*background-color: #7b5ff5;*/
}

.popup1-text2, .popup2-text2, .popup4-text2, .popup5-text2, .popup6-text2, .popup7-text2, .popup8-text2 {
  color: #664C32;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  text-align: center;
  /*background-color: #3ab179;*/
}

.popup3-text2 {
  color: #664C32;
  font-family: "manrope", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  text-align: center;
  /*background-color: #3ab179;*/
}

.popup1-text3, .popup2-text3, .popup3-text3, .popup4-text3, .popup5-text3, .popup6-text3, .popup7-text3, .popup8-text3 {
  color: #664C32;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  line-height: 2;
  text-align: center;
  /*background-color: #98b0d4;*/
}

.popup1-text3, .popup8-text3 {
    margin: 10% 14%;
}

.popup2-text3, .popup3-text3, .popup4-text3, .popup6-text3 {
    margin: 10% 13%;
}


.popup5-text3 {
    margin: 10% 17%;
}

.popup7-text3 {
    margin: 10% 20%;
}

.popup3-window-img {
    max-width: 100%;
    width: 30%;
    display: block;
    margin: 0 10%;
    /*background-color: #7b5ff5;*/
}

.popup7-window-img {
    max-width: 100%;
    width: 25%;
    display: block;
    margin: 0 auto;
    transform: rotate(-57deg);
    /*background-color: #7b5ff5;*/
}

/*.popup1-text:not(:last-of-type), .popup2-text:not(:last-of-type), .popup3-text:not(:last-of-type), .popup4-text:not(:last-of-type), .popup5-text:not(:last-of-type), .popup6-text:not(:last-of-type), .popup7-text:not(:last-of-type), .popup8-text:not(:last-of-type) {
  margin-bottom: 1em;
}*/

.popup1-close, .popup2-close, .popup3-close, .popup4-close, .popup5-close, .popup6-close, .popup7-close, .popup8-close {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  /*background-color: #664C32;*/
  /*border-radius: 50%;*/
}

/*サブのネコ画像の記述*/
.sub {
    max-width: 100%;
    margin: 5% auto 0;
}

.sub-parallax_content{
  display: flex;
  height: 40vw;
  padding: 0;
  justify-content: center;
  align-items: center;

  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sub-img_bg_01{
  background-image: url(../images/pixabay_animal-7181776_1280.jpg); /*サブ画像ネコ*/
}

/*Skillの記述*/
.skill {
    max-width: 80%;
    margin: auto;
    padding: 0 4%;
    /*background-color: #98d4c5;*/
}

.skill h2 {
    margin: 5% 0;
}

.skill_list {
    margin: 0 0 0 35%;
    /*background-color: #afdbe5;*/
}

.skill_item {
    list-style: disc;
    text-align: left;
    color: #664C32;
    font-size: 16px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    line-height: 2;
}

/*Future visionの記述*/
.future-vision {
    max-width: 80%;
    margin: auto;
    padding: 0 4%;
    /*background-color: #98d4c5;*/
}

.future-vision p {
    width: 63%;
    text-align: center;
    font-size: 16px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    line-height: 2;
    /*background-color: aqua;*/
    margin: 0 auto;
}

/*Worksページ（workspage）の記述*/
.workspage {
    max-width: 80%;
    margin: auto;
    padding: 140px 4% 0 4%;
}

.workspage ul {
    display: grid;
    max-width: 100%;
    /*background-color: aqua;*/
    grid-template-columns: 1fr 1fr;
    gap: 30px 90px;
}

.workspage img {
    max-width: 100%;
    height: auto;/*WordPress用に追加*/
    /*border-radius: 10%; */ /*書き出し時に角丸の写真を入れる*/
}

/*WorksページのContents（workspage-contents）の記述*/
.workspage-contents {
    max-width: 80%;
    margin: auto;
    padding: 160px 4% 0 4%;
}

.workspage-contents img {
    display: block;
    max-width: 100%;
    width: 50%;
    /*border-radius: 10%;*/ /*書き出し時に角丸の写真を入れる*/
    margin: 4% auto;
    height: auto;/*WordPress用に追加*/
}

.workspage-contents h3 {
    font-weight: bold;
    margin: 0 auto;
}

.workspage-contents h4 {
    font-size: 20px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    margin: 3% auto 2%;
    text-align: center;
}

.workspage-contents p {
    width: 50%;
    text-align: left;
    font-size: 16px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    line-height: 2;
    /*background-color: aqua;*/
    margin: 0 auto; 
}

.view-all {
    text-align: center;
}

.view-all a {
    font-size: 16px;
    font-family: "manrope", sans-serif;
    color: #664C32;
    line-height: 2;
}

.view-all span {
    display: block;
    width: 70px;
    height: 1px;
    background-color: #664C32;
    margin: auto;
}

/*Related worksの記述*/
.related-works {
    max-width: 70%;
    margin: auto;
    padding: 0 4%;
}

.related-works ul {
    display: grid;
    max-width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 30px;
}

.related-works img {
    max-width: 100%;
    /*border-radius: 10%;*/ /*書き出し時に角丸の写真を入れる*/
    height: auto;/*WordPress用に追加*/
}

/*Contactページ（contactpage）の記述*/
.contactpage {
    max-width: 80%;
    margin: auto;
    padding: 140px 4% 0 4%;
}

.contactpage p {
    text-align: center;
    font-size: 16px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    line-height: 2;
    padding: 0;
}

/* フォーム全体のスタイル */
.contact-form {
    /*background-color: rgb(148, 55, 55);*/
    padding: 4%;
    width: 65%;
    max-width: 100%;
    margin: 1% auto 7%;
    /*border-radius: 10px;*/
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
    text-align: left;
    box-sizing: border-box; /* これで padding, border を含めたサイズ計算をする */
}

/*ラベルと入力欄を左右に並べる*/
.contact-form-1 {
    display: flex;
    gap: 5%;
    /*background-color: #ebc77b;*/
}

/* ラベルのスタイル */
.contact-form-1 label {
    display: block;
    width: 40%;
    margin-top: 4.5%;
    color: #664C32;
    font-size: 16px;
    font-family: "manrope", sans-serif;
    /*background-color: #abccb3;*/
}

/* 入力欄のスタイル */
.contact-form-1 input, .contact-form-1 textarea {
    width: 100%; /* box-sizingが適用されるので、paddingやborder込みで100%に収まる */
    padding: 2%;
    margin-top: 2.5%;
    /*border: 1px solid #943e3e;*/
    background-color: #E8DFD6;
    border-radius: 40px;
    font-size: 16px;
}

/* テキストエリアの高さを調整 */
.contact-form-1 textarea {
    resize: vertical;
    height: 10rem;
}

/* 送信ボタンのスタイル */
.contact-form button {
    display: block;
    background-color: #F5C65F;
    color: #664C32;
    border: none;
    padding: 3%;
    width: 45%;
    margin: 5% auto 0;
    border-radius: 2vw;
    font-size: 24px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    cursor: pointer;
    text-align: center;
}

/* ホバー時のボタンスタイル */
.contact-form button:hover {
    background-color: #d6d598;
}

/* 送信完了のスタイル */
.contact-completed {
    max-width: 80%;
    margin: auto;
    padding: 4% 0;
}

.contact-completed-h2-1 {
    font-size: 40px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    text-align: center;
    margin: 5% auto 0;
}

.contact-completed-h2-2 {
    font-size: 40px;
    font-family: "manrope", sans-serif;
    color: #F5C65F;
    text-align: center;
    margin: 2% auto 10%;
}

.contact-completed p {
    text-align: center;
    font-size: 16px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    line-height: 2;
}

.contact-completed-button {
    display: block;
    color: #664C32;
    border-bottom: 2px solid #664C32;
    width: 230px;
    padding: 0 0 1%;
    margin: 10% auto 3%;
    font-size: 24px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    cursor: pointer;
    text-align: center;
}

/* 送信エラーのスタイル */
.contact-error {
    max-width: 80%;
    margin: auto;
    padding: 4% 0;
}

.contact-error-h2-1 {
    font-size: 40px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    text-align: center;
    margin: 5% auto 0;
}

.contact-error-h2-2 {
    font-size: 40px;
    font-family: "manrope", sans-serif;
    color: red;
    text-align: center;
    margin: 2% auto 10%;
}

.contact-error p {
    text-align: center;
    font-size: 16px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #664C32;
    line-height: 2;
}

.contact-error-button {
    display: block;
    color: #664C32;
    border-bottom: 2px solid #664C32;
    width: 230px;
    padding: 0 0 1%;
    margin: 8% auto 0;
    font-size: 24px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    cursor: pointer;
    text-align: center;
}




/* PC用のCSS(1024px以上)はメディアクエリの外に記述する */

/* 1023px以下(481px~1023px)に適用されるCSS（タブレット用） */
@media screen and (min-width: 481px) and (max-width: 1023px) {
    .header-container { top: 4%;}
    .header { padding: 0 4%;}
    .logo {
        font-size: 40px;
        line-height: 1;
        width: 175px;
        height: 175px;
    }
    .drawer_open { 
        height: 60px;
        width: 60px;
    }
    .drawer_open span, .drawer_open span:before, .drawer_open span:after {
        width: 25px;
    }
    /* 三本線の一番上の棒の位置調整 */
    .drawer_open span:before {
        bottom: 8px;
    }
    /* 三本線の一番下の棒の位置調整 */
    .drawer_open span:after {
        top: 8px;
    }
    /* アイコンがクリックされたらアイコンの×印の背後の円の色変わる*/
    #drawer_input:checked ~ .drawer_open {
        height: 60px;
        width: 60px;
    }
    /* メニューのデザイン*/
    .nav_content { border-radius: 8vw;}
    /* アイコンがクリックされたらメニューを表示 */
    #drawer_input:checked ~ .nav_content {
        left: 70;/* メニューを画面に入れる */
    }
    /*メニュー内の記述*/
    .nav_list {
        font-size: 24px;
        margin: 30% 10%;
    }
    .nav_item {
        line-height: 3;
    }

    /*メイン画像と文字の記述*/
    .main-parallax_content {
        background-position: 80%;
    }
    
    h2 {font-size: 40px;}

    /*Aboutの記述*/
    .about1 {flex-direction: column;}
    .about2 {
        order: 2;
        padding-left: 0;
    }
    .about2 p {
        font-size: 16px;
        line-height: 2;
        padding: 5% 0% 3%;
        text-align: center;
        margin: auto;
    }
    .about img {
        order: 1;
        max-width: 100%;
    }

    /*Worksの記述*/
    .works ul {grid-template-columns: 1fr;}
    h3 {
        font-size: 24px;
    }

     /*Contactの記述*/
    .contact1 {
        width: 30rem;
        height: 28rem;
    }
    .contact1 button {
        font-size: 24px;
        padding: 4% 10%;
        top: -9%;
    }

    /*トップへ戻るボタンの記述*/
    .pagetop {
        height: 50px;
        width: 50px;
        right: 30px;
        bottom: 30px;
    }

    Footer {
        margin: 0 auto 12%;
    }
    .footer-flex-item-font1 {font-size: 24px;}
    .footer-flex-item-font2 {font-size: 20px;}
    .copy-right {
        font-size: 12px;
        padding-top: 2%;
    }

    /*ホームページへ飛ぶボタン（ホームのロゴ）の記述*/
    .pagetop-homelogo {display: none;}
    /*コンタクトページへ飛ぶボタン（メールのロゴ）の記述*/
    .pagetop-maillogo {display: none;}
    
    /*profileの記述*/
    .profile {padding: 190px 4% 0 4%;}
    .profile1 {flex-direction: column;}
    .profile1 p {
        order: 2;
        font-size: 16px;
        line-height: 2;
        margin-right: 0;
        padding: 5% 10% 0;
    }
    .profile1 img {
        order: 1;
        max-width: 90%;
    }

    /*backgroundの記述*/
    .background1 {flex-direction: column;}
    .background1 img {max-width: 90%;}
    .background1 p {
        font-size: 16px;
        line-height: 2;
        padding: 5% 10% 0;
    }

    /*Careerの記述*/
    .career p {
        width: 100%;
        font-size: 16px;
        line-height: 2;
        padding: 0 10%;
    }

    /*My favorite thingsの記述*/
    .my-favorite-things1 {
        grid-template-columns:repeat(2,1fr);
        gap: 30px 0px;
    }
    .popup1-open-img, .popup2-open-img, .popup3-open-img, .popup4-open-img, .popup5-open-img, .popup6-open-img, .popup7-open-img, .popup8-open-img {
        width: 11rem;
        height: 11rem;
    }
    .popup3-window-img {margin: 0 15%;}

    /*サブのネコ画像の記述*/
    .sub-parallax_content{padding: 0; height: 80vw;}

    /*Skillの記述*/
    .skill_list {margin: 0 0 0 24%;}
    .skill_item {
        font-size: 16px;
        line-height: 2;
    }

    /*Future visionの記述*/
    .future-vision p {
        width: 79%;
        font-size: 16px;
        line-height: 2;
    }

    /*Worksページ（workspage）の記述*/
    .workspage {padding: 190px 4% 0 4%;}
    .workspage ul {
        grid-template-columns: 1fr;
    }

    /*WorksページのContents（workspage-contents）の記述*/
    .workspage-contents {padding: 220px 4% 0 4%;}
    .workspage-contents img {width: 90%;}
    .workspage-contents h4 {font-size: 20px;}
    .workspage-contents p {
        width: 80%;
        font-size: 16px;
        line-height: 2;
    }

    /*Related worksの記述*/
    .related-works ul {
        grid-template-columns: 1fr;
        max-width: 70%;
        margin: 0 auto;
    }

    /*Contactページ（contactpage）の記述*/
    .contactpage {padding: 190px 4% 0 4%;}
    .contactpage p {
        font-size: 16px;
        line-height: 2;
    }
    /* フォーム全体のスタイル */
    .contact-form {
        width: 95%;
    }
    /*ラベルと入力欄を左右に並べる*/
    .contact-form-1 {
        gap: 10%;
    }
    /* 入力欄のスタイル */
    .contact-form-1 input, .contact-form-1 textarea {
        margin-top: 3%;
        border-radius: 20px;
        font-size: 16px;
    }
    /* 送信ボタンのスタイル */
    .contact-form button {
        font-size: 24px;
        padding: 5%;
        width: 60%;
        border-radius: 7vw;
    }

    /* 送信完了のスタイル */
    .contact-completed-h2-1 {font-size: 40px; margin: 30% auto 10%;}
    .contact-completed-h2-2 {font-size: 40px;}
    .contact-completed p {font-size: 16px;}
    .contact-completed-button {
        font-size: 24px;
        width: 230px;
        padding: 0 0 2%;
        margin: 25% auto 10%;
    }

    /* 送信エラーのスタイル */
    .contact-error-h2-1 {font-size: 40px; margin: 30% auto 10%;}
    .contact-error-h2-2 {font-size: 40px;}
    .contact-error p {font-size: 16px;}
    .contact-error-button {
        font-size: 24px;
        width: 230px;
        padding: 0 0 2%;
        margin: 20% auto 10%;
    }

}

/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
    .header-container { top: 30px;}
    .header { padding: 0 4%;}
    .logo {
        font-size: 24px;
        line-height: 1.1;
        width: 120px;
        height: 120px;
    }
    .drawer_open { 
        height: 60px;
        width: 60px;
    }
    .drawer_open span, .drawer_open span:before, .drawer_open span:after {
        width: 25px;
    }
    /* 三本線の一番上の棒の位置調整 */
    .drawer_open span:before {
        bottom: 8px;
    }
    /* 三本線の一番下の棒の位置調整 */
    .drawer_open span:after {
        top: 8px;
    }
    /* アイコンがクリックされたらアイコンの×印の背後の円の色変わる*/
    #drawer_input:checked ~ .drawer_open {
        height: 60px;
        width: 60px;
    }
    /* メニューのデザイン*/
    .nav_content { border-radius: 0;}
    /* アイコンがクリックされたらメニューを表示 */
    #drawer_input:checked ~ .nav_content {
        left: 0;/* メニューを画面に入れる */
    }
    /*メニュー内の記述*/
    .nav_list {
        font-size: 24px;
        margin: 55% 40%;
    }
    .nav_item {
        line-height: 3;
    }

    /*メイン画像と文字の記述*/
    .main-parallax_content {
        background-position: 75%;
    }
    .maintext {font-size: 32px;}
    .maintext span {font-size: 24px;}

    h2 {font-size: 24px;}

    /*Aboutの記述*/
    .about1 {flex-direction: column;}
    .about2 {
        order: 2;
        padding-left: 0;
    }
    .about2 p {
        font-size: 16px;
        line-height: 2;
        padding: 5% 0% 3%;
        text-align: left;
        margin: auto;
    }
    .about img {
        order: 1;
        max-width: 90%;
    }

    /*Worksの記述*/
    .works {padding: 7% 4%;}
    .works ul {
        grid-template-columns: 1fr;
        max-width: 90%;
        margin: 0 auto;
    }
    h3 {
        font-size: 24px;
    }

    /*Contactの記述*/
    .contact1 {
        width: 20rem;
        height: 20rem;
    }
    .contact1 p {font-size: 16px;}
    .contact1 button {
        font-size: 24px;
        padding: 4% 11%;
        top: -8%;
    }

    /*トップへ戻るボタンの記述*/
    .pagetop {
        height: 40px;
        width: 40px;
        right: 25px;
        bottom: 25px;
    }

    Footer {
        margin: 0 auto 10%;
    }
    .footer-flex-container {
        display: block;
    }
    .footer-flex-item-font1, .footer-flex-item-font2 {
        text-align: center;
    }
    .footer-flex-item-font1 {
        line-height: 1;
        font-size: 20px;
        padding-top: 5%;
        padding-bottom: 5%;
    }
    .footer-flex-item-font2 {
        line-height: 2;
        font-size: 16px;
    }
    .copy-right {
        font-size: 8px;
        text-align: center;
        padding-top: 5%;
    }

    /*ホームページへ飛ぶボタン（ホームのロゴ）の記述*/
    .pagetop-homelogo {display: none;}
    /*コンタクトページへ飛ぶボタン（メールのロゴ）の記述*/
    .pagetop-maillogo {display: none;}

    /*profileの記述*/
    .profile {padding: 130px 4% 0 4%;}
    .profile1 {flex-direction: column;}
    .profile1 p {
        order: 2;
        font-size: 16px;
        line-height: 2;
        margin-right: 0;
        padding-top: 5%;
    }
    .profile1 img {
        order: 1;
        max-width: 100%;
    }

    /*backgroundの記述*/
    .background1 {flex-direction: column;}
    .background1 img {max-width: 100%;}
    .background1 p {
        font-size: 16px;
        line-height: 2;
        padding-top: 5%;
    }

    /*Careerの記述*/
    .career p {
        width: 100%;
        font-size: 16px;
        line-height: 2;
    }

    /*My favorite thingsの記述*/
    .my-favorite-things1 {
        grid-template-columns: 1fr;

        background-image: url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png), url(../images/pixabay_flower-1837356_1280.png);
        background-size: 10%;
        background-repeat: no-repeat;
        background-position: 93% 18%, 90% 20.5%, 83% 22.5%, 73% 24%, 28% 37%, 17% 38.5%, 9% 40.5%, 7% 43%, 95% 56.5%, 92% 59%, 84% 61%, 74% 62.5%, 25% 76%, 15% 77.5%, 8% 79.5%, 5% 82%;
    }
    .popup1-open-img, .popup2-open-img, .popup3-open-img, .popup4-open-img, .popup5-open-img, .popup6-open-img, .popup7-open-img, .popup8-open-img {
        width: 9rem;
        height: 9rem;
    }
    .popup1-window, .popup2-window, .popup3-window, .popup4-window, .popup5-window, .popup6-window, .popup7-window, .popup8-window {
        width: 80%;
        height: 30rem;
        background-color: #F5C65F;
        border-radius: 30vw;
    }
    .popup1-text1, .popup2-text1, .popup3-text1, .popup4-text1, .popup5-text1, .popup6-text1, .popup7-text1, .popup8-text1 {
        font-size: 18px;
        margin: 10% auto;
    }
    .popup1-titleflower-border, .popup2-titleflower-border, .popup3-titleflower-border, .popup4-titleflower-border, .popup5-titleflower-border, .popup6-titleflower-border, .popup7-titleflower-border, .popup8-titleflower-border {
        margin: 0 4%;
    }
    .popup1-text2, .popup2-text2, .popup4-text2, .popup5-text2, .popup6-text2, .popup7-text2, .popup8-text2 {
        font-size: 20px;
    }
    .popup3-text2 {font-size: 20px;}
    .popup1-text3, .popup8-text3 {margin: 5% 5%;}
    .popup2-text3, .popup3-text3, .popup4-text3, .popup6-text3 {margin: 5% 5%;}
    .popup5-text3 {margin: 5% 5%;}
    .popup7-text3 {margin: 5% 5%;}

    .popup3-window-img {margin: 15% 5%;}

    /*サブのネコ画像の記述*/
    .sub-parallax_content{padding: 0; height: 150vw;}

    /*Skillの記述*/
    .skill_list {margin: 0 0 0 5%;}
    .skill_item {
        font-size: 16px;
        line-height: 2;
    }

    /*Future visionの記述*/
    .future-vision p {
        width: 100%;
        font-size: 16px;
        line-height: 2;
    }

    /*Worksページ（workspage）の記述*/
    .workspage {padding: 130px 4% 0 4%;}
    .workspage ul {
        grid-template-columns: 1fr;
        max-width: 90%;
        margin: 0 auto;
    }

    /*WorksページのContents（workspage-contents）の記述*/
    .workspage-contents {padding: 150px 4% 0 4%;}
    .workspage-contents img {width: 90%;}
    .workspage-contents h4 {font-size: 20px;}
    .workspage-contents p {
        width: 80%;
        font-size: 16px;
        line-height: 2;
    }

    /*Related worksの記述*/
    .related-works ul {
        grid-template-columns: 1fr;
        max-width: 70%;
        margin: 0 auto;
    }

    /*Contactページ（contactpage）の記述*/
    .contactpage {
        max-width: 90%;
        padding: 130px 4% 0 4%;
    }
    .contactpage p {
        font-size: 16px;
        line-height: 2;
    }
    /* フォーム全体のスタイル */
    .contact-form {
        width: 100%;
        padding: 0;
    }
    /*ラベルと入力欄を左右に並べる*/
    .contact-form-1 {
        gap: 5%;
    }
    /* ラベルのスタイル */
    .contact-form-1 label {
        font-size: 16px;
        width: 40%;
        margin-top: 5%;
    }
    /* 入力欄のスタイル */
    .contact-form-1 input, .contact-form-1 textarea {
        margin-top: 7%;
        border-radius: 5px;
        font-size: 16px;
    }
    /* 送信ボタンのスタイル */
    .contact-form button {
        font-size: 24px;
        padding: 5%;
        width: 80%;
        border-radius: 7vw;
    }

    /* 送信完了のスタイル */
    .contact-completed-h2-1 {font-size: 24px; margin: 50% auto 10%;}
    .contact-completed-h2-2 {font-size: 24px;}
    .contact-completed p {font-size: 16px;}
    .contact-completed-button {
        font-size: 20px;
        width: 200px;
        padding: 0 0 2%;
        margin: 20% auto 25%;
    }

    /* 送信エラーのスタイル */
    .contact-error-h2-1 {font-size: 24px; margin: 50% auto 10%;}
    .contact-error-h2-2 {font-size: 24px;}
    .contact-error p {font-size: 16px;}
    .contact-error-button {
        font-size: 20px;
        width: 200px;
        padding: 0 0 2%;
        margin: 20% auto 15%;
    }

}