@charset "utf-8";
/*
  Theme Name: Portfolio
  Author: Emily
  Description: For Personal Web Design Portfolio use
  Version: 1.0
*/

/* 共通css */
body {
    max-width: 1440px;
    margin: 0 auto;
    font-family:"Poppins","Noto Sans JP","Noto Sans TC",sans-serif;
    font-size: 16px;
    line-height: 2rem;
    background-color:#FFFFFF;
    color: #12124c;
    display: block;
    overflow-x: hidden;
}
.innerWrap {
    width: 90%;
    margin: 0 auto 80px;
}
.sp {
    display: none;
}
.pc {
    display: block;
}
/* fadein css */
.fadein {
    opacity: 0;
    transform: translate(0,0);
    /* 何秒でフェードインが完了するか */
    transition: all 1.7s;
    /* 左から */
  &.fadein-left{
      transform: translate(-30px,0);
  }
  /* 右から */
  &.fadein-right{
      transform: translate(30px,0);
  }
  /* 上から */
  &.fadein-up{
      transform: translate(0,-30px);
  }
  /* 下から */
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  /* その場で */
  &.fadein-sonoba{
    transform: translate(0,0px);
}
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}

/* PC用nav（ナビゲーション）css*/
.gMenu {
    background-color: rgba(255,255,255,0.9);
    min-width: 100%;
    height: 7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 10;
    padding: 0 6%;
}

.gMenu h1 a {
    background-image: url(../img/logo.png);
    width: 70px;
    height: 70px;
    display: block;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.gMenu ul {
    display: flex;
}

.gMenu ul a {
    display: block;
    padding: 15px;
    text-decoration: none;
}

.gMenu ul a:hover {
    border-bottom: 2px solid #12124c;
    color: #ed1c24;
}

/* 多言語メニューcss */
.gMenu_dropdown {
    position: relative;
}

.gMenu_dropdown ul {
    background-color: rgba(255, 255, 255, 0.9);
    display: none;
    position: absolute;
    top: 64px;
    right: 0;
}

.gMenu .gMenu_dropdown ul a {
    font-size: 14px;
    padding: 10px;
}

.gMenu_dropdown i {
    margin-left: 10px;
}

/* 日本語と中国語用サブメニュー幅 */
.gMenu_dropdown .ja-tw-submenu li a{
    padding: 15px 25px;
}

/* 多言語メニューホバーする表示 */
.gMenu_dropdown:hover ul {
    display:block;
}

/* チェックボックスは常に非表示 */
header nav .menu-btn {
  display: none;
}

/* start of banner（バナー）css */
.banner {
    width: 100%;
    height: 800px;
    position: relative;
    z-index: 1;
}

.bannerimg {
    position: absolute;
    left: 8%;
    top: 14%;
}

.bannerimg img {
    max-width: 100%;
    height: 600px;
    display: block;
}

.banner h2 {
    background-color: inherit;
    color: #12124c;
    display: block;
    width: auto;
    font-size: 45px;
    font-weight: bold;
    line-height: 5rem;
    text-align: left;
    position: absolute;
    top: 15%;
    left: 10%;
    z-index: 3;
}

.bannerText {
    font-size: 25px;
    position: absolute;
    right: 8%;
    bottom: 15%;
    line-height: 3.5rem;
}

.banner span {
    font-size: 4rem;
}

.scroll {
    max-width: 100%;
    text-align: center;
    align-items: flex-end;
    padding: 60px 0px;
}

.scroll img {
    margin-bottom: 10px;
}

/* mainセクション共通css */
main section {
    margin-bottom: 150px;
}

main h2 {
    width: 35vw;
    background-color: #12124c;
    font: bold 30px "poppings", sans-serif;
    color: #FFFFFF;
    text-align: center;
    padding: 30px 0; 
    position: relative;
}

main h3 {
    font: bold 24px "poppings", sans-serif;
    color: #ed1c24;
    margin-bottom: 20px;
    text-align: center;
}

main h4 {
    margin-bottom: 20px;
}

/* start of intro div css */
main section .intro {
    max-width: 100%;
    height: 450px;
    position: relative;
}

/* intro説明の五角形css */
main section .introDetails {
    max-width: 100%;
    height: 380px;
    background-color: #efefef;
    position: absolute;
    top: 12%;
    left: 15%;
    z-index: -1;
    clip-path: polygon(100% 0, 100% 70%, 50% 100%, 0 70%, 0 0);
    padding: 50px;
}

.introDetails p {
    text-align: justify;
    padding: 0 80px;
}

/* css for About My Thoughts */
.myThoughts ul {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 50px;   
}

.myThoughts h3, 
.myThoughts h4 {
    margin-bottom: 40px;
    text-align: center;
}

.myThoughtsHeadline {
    width: 350px;
}

.myThoughts p {
    margin-bottom: 10px;
    text-align: justify;
    padding: 0 30px;
}

.myThoughtsDetails {
    width: 300px;
    height: 300px;
    border: 2px solid #12124c;
    box-shadow: 6px 3px 0px 0px #12124c;
    position: relative;
    padding-top: 50px;
}

.myThoughtsDetails h3 {
    width: 120px;
    background-color: #FFFFFF;
    position: absolute;
    top: -20px;
    left: 30%;
}

/* css for about my thoughts 英語バージョン */
.thoughts-en {
    width: 325px;
    height: 325px;
}

/* css for make up website details */
.changes {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.changesLeft {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-right: 80px;
}

/* 暗い背景の設定 */
.changes-modal-wrapper {
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 40px 10px;
    text-align: center;
}
/* 写真の設定 */
#changes-modal-button {
    text-align: center;
    line-height: 2.2;
}
/* 写真ブロック化 */
#changes-modal-button a{
    position: relative;
    display: block;
    text-decoration: none;
}
#changes-modal-button img {
    width: 75%;
}
 /*モーダルウィンドウの設定  */
.changes-modal-wrapper:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2;
}
 /*モーダルウィンドウの設定  */
.changes-modal-wrapper:target {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s, visibility .3s;
}
 /*モーダルウィンドウの設定  */
.changes-modal-wrapper::after {
    display: inline-block;
    height: 100%;
    margin-left: -.05em;
    vertical-align: middle;
    content: ""
}
 /*出てくるモーダルウィンドウの設定  */
.changes-modal-wrapper .changes-modal-window {
    box-sizing: border-box;
    display: inline-block;
    z-index: 20;
    position: relative;
    width: fit-content;
    max-width: 700px;
    padding: 50px 30px 0px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, .6);
    vertical-align: middle
}
/* モーダルウィンドウ内のコンテンツエリアの設定 */
.changes-modal-wrapper .changes-modal-window .changes-modal-content {
    max-height: 80vh;
    text-align: left;
    overflow: scroll;
    overflow-x : scroll;
}
.changes-modal-wrapper .changes-modal-window .changes-modal-content img {
    width: 95%;
    margin: 0 15px;
}
/* モーダルウィンドウを出した時の暗い背景 */
.changes-modal-overlay {
    z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .6)
}
/* 閉じるボタン */
.changes-modal-wrapper .changes-modal-close {
    z-index: 20;
    position: absolute;
    top: 12px;
    right: 10px;
    width: 35px;
    color: #12124c !important;
    font-size: 30px;
    font-weight: 700;
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    text-indent: 0
}
/*閉じるボタン　ホバーで色変更  */
.changes-modal-wrapper .changes-modal-close:hover {
    color: #ed1c24 !important
}

.changesRight {
    max-width:50%;
}

.changesRight li {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    padding: 20px 0px;
}

.changesRight_2 {
    border-top: 2px solid #12124c;
    border-bottom: 2px solid #12124c;
}

/* 自己紹介セクションcss*/
.profile {
    border: 2px solid #12124c;
    box-shadow: 6px 3px 0px 0px #12124c;
    position: relative;
    padding: 30px 10px;
}

.profile h2 {
    position: absolute;
    left: 35%;
    top: -12%;
}

.profile_innerWrap {
    width: 85%;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.profile figure {
    flex-basis: 25%;
    margin: 0 auto;
}
.profile figure img {
    width: 100%;
}
.profile div {
    flex-basis: 55%;
}

.profile div span {
    font-size: 12px;
}

.profile h3 {
    color: #12124c;
    text-align: left;
}

.profile div p {
    text-align: justify;
}

/* css for life story timeline(年表） */
/* The actual timeline (the vertical ruler) */
.lifeStory {
    h4 {
        text-align: right;
    }

    span {
        font-size: 20px;
        font-weight: bold;
        color:#ed1c24;
    }

    p {
        text-align: justify;
    }

    > p {
        text-align: center;
    }
}

.timeline {
    position: relative;
    max-width: 100%;
    margin: 50px auto 0;
    padding-bottom: 30px;;
}

.timeline div:nth-last-child(1) {
    margin-bottom: 0;
}

/* The actual timeline (直線) */
.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: #12124c;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

/* Container around content */
.timelineContainer {
    padding: 0 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    margin-bottom: 30px;
}

/* The circles on the timeline（年表に示す点） */
.timelineContainer::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    right: 3.2%;
    background-color: #12124c;
    top: 0px;
    border-radius: 50%;
    z-index: 1;
}
  
/* Place the container to the left */
.left {
    left: 2%;
}

/* Place the container to the right */
.right {
    left: 50%;
    
    h4 {
        text-align: left;
    }
}
  
/* Fix the circle for containers on the right side */
.right::after {
    left: -9px;
}
  
/* The actual content */
.content {
   width: 100%;
}
  
/* the last div text */
.lifeStory_lasttext {
    width: 350px;
    margin: 0 auto;
    padding: 20px;
    border: 2px solid #12124c;
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
}

/* css for skills */
.mySkills {
    background-color: #efefef;
    clip-path: polygon(61% 0, 100% 5%, 100% 100%, 0 100%, 0 0);
    padding: 20px 50px 0;
}

.mySkills h3 {
    text-align: left;
}

.mySkills h4,
.mySkills p {
    margin-bottom: 20px;
    line-height: 1.5rem;
}

.mySkills img {
    width: 80%;
}

.mySkills .school div {
    background-color: rgba(255,255,255,0.8);
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 50px;
}

.mySkills .school div h4 {
    font-weight: 700;
}

.mySkills .school div p {
    margin-bottom: 0;
}

.mySkills>div {
    max-width: 85%;
    margin: 0 auto;
}

.mySkills ul {
    margin-bottom: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.textcenter p,
.textcenter span {
    text-align: center;
}

.mySkills .mySkills_weird {
    justify-content: space-evenly;
    gap: 120px;
}

.mySkills_weird img {
    width: inherit;
}

.mySkills_weird li span {
    text-align: justify;
    line-height: 2rem;
}

/* css for Software & Platforms */
.ITskills {
    display: flex;
    justify-content: space-between;
    margin: 0;
}

.ITskills p {
    margin: 0;
}

.ITskills li img {
    width: 50px;
    height: 50px;
}

.ITskills li span img {
    display: block;
    width: 50px;
    height: 71px;
}

.ITskills ul {
    width: 200px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 40px;
    margin: 0;
    padding: 40px 0;
}
/* end of my skills css */

/* css for myBoom */
.beforetravel {
    display: flex;
    justify-content: space-around;
    margin: 80px 0;

    span {
        writing-mode: vertical-lr;
        align-content: center;
        text-align: center;
        flex-basis: 10%;
        position: relative;
        background-image:
        linear-gradient(-45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
        repeating-linear-gradient(135deg, #12124c 0 2px, transparent 2px 4px);
    }

    p {
        flex-basis: 30%;
        padding: 25px 0;
    }
}

/* 暗い背景の設定 */
.modal-wrapper {
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 40px 10px;
    text-align: center;
}
/* 写真の設定 */
#modal-button {
    /* z-index: 9999; */
    text-align: center;
    line-height: 2.2;
}
/* 写真ブロック化 */
#modal-button a{
    position: relative;
    display: block;
    text-decoration: none;
}
#modal-button img {
    width: 75%;
}
 /*モーダルウィンドウの設定  */
.modal-wrapper:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2;
}
 /*モーダルウィンドウの設定  */
.modal-wrapper:target {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s, visibility .3s;
}
 /*モーダルウィンドウの設定  */
.modal-wrapper::after {
    display: inline-block;
    height: 100%;
    margin-left: -.05em;
    vertical-align: middle;
    content: ""
}
 /*出てくるモーダルウィンドウの設定  */
.modal-wrapper .modal-window {
    box-sizing: border-box;
    display: inline-block;
    z-index: 20;
    position: relative;
    width: fit-content;
    max-width: 600px;
    padding: 50px 30px 0px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, .6);
    vertical-align: middle
}
/* モーダルウィンドウ内のコンテンツエリアの設定 */
.modal-wrapper .modal-window .modal-content {
    max-height: 85vh;
    max-width: 80vh;
    text-align: left;
    overflow: scroll;
    overflow-x : scroll;
}

/* モーダルウィンドウを出した時の暗い背景 */
.modal-overlay {
    z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .6)
}
/* 閉じるボタン */
.modal-wrapper .modal-close {
    z-index: 20;
    position: absolute;
    top: 12px;
    right: 10px;
    width: 35px;
    color: #95979c !important;
    font-size: 30px;
    font-weight: 700;
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    text-indent: 0
}
/*閉じるボタン　ホバーで色変更  */
.modal-wrapper .modal-close:hover {
    color: #2b2e38 !important
}

.aftertravel {
    max-width: 920px;
    margin: 0 auto;
}

.aftertravel_head span {
    margin-bottom: 50px;
    display: block;
    text-align: center;
}

.aftertravel_head p {
    margin-bottom: 80px;
    text-align: justify;
}

/* photogallery css */
.photogallery {
    width: 850px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.photogallery h4::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 40px 40px;
    border-color: transparent transparent #12124c transparent;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.photogallery li {
    position: relative;
    width: 250px;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    margin-bottom: 100px;
}  

.photogallery li img {
    width: 100%;
    margin-bottom: 10px;
    object-fit: cover;
}

.photogallery li h4 {
    padding: 0 10px;
}

.photocontent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #efefef;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.photogallery li:hover .photocontent {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
}
.photogallery-horizon {
    width: 900px;
}
.photogallery-horizon li {
    width: 430px;
}
/* About My Way セクション 共通css */
.myway {
    background-color: #efefef;
    padding: 50px 0 ;
}

.mywayInnerwrap {
    padding: 0 50px;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
}

/* start of アイデア div css */
.idea ul {
    display: flex;
    justify-content: space-evenly;
}

.idea p {
    text-align: center;
    margin-top: 10px;
}

.idea span {
    flex-basis: 10%;
    display: block;
    align-content: center;
    font-size: 28px;
    writing-mode: vertical-lr;
    text-align: center;
}

.ideaLeft {
    flex-basis: 40%;
}

.ideaLeft > p:nth-last-child(1) {
    margin-top: 20px;
    text-align: justify;
}

.ideaRight {
    flex-basis: 40%;
}

.ideaRight > p:nth-last-child(1) {
    text-align: justify;
}

/* ストレス div css */
.stressDescr {
    margin: 80px 0 40px;
    text-align: center;
}

.stressDescr p {
    display: block;
    width: 350px;
    border-bottom: 2px dashed #12124c;
    padding-bottom: 10px;
    margin: 0 auto 50px;
}

.stressDescr span {
    display: block;
    line-height: 2rem;
    padding: 0 250px;
}

.stressContainer {
    max-width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 25px;
}

.stressContainer .stressCard .stressHead {
    width: 250px;
    height: 300px;
    background: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.5px solid #12124c;
}

.stressContainer .stressCard .stressHead .stressContent_head p {
    text-align: center;
}

.stressContainer .stressCard .stressHead .stressContent_head h3 {
    margin: 10px 0 0;
    padding: 0;
    font-size: 16px;
    text-align: center;
}

.stressContainer .stressText {
    width: 250px;
    height: 300px;
    position: relative;
    background-color: rgba(29, 32, 79,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.stressContainer .stressText p {
    color: #FFFFFF;
}

/* 作品セクションcss */
.workDetails {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 30px 0;
    border-bottom: 2px solid #12124c;
    animation: fede-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
    -webkit-animation-timeline: view();
    -webkit-animation-range: entry 0% cover 40%;
    -moz-animation-timeline: view();
    -moz-animation-range: entry 0% cover 40%;
}

.workDetails figure {
    flex-basis: 35%;
    text-align: center;
}

.workDetails #modal-button img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.workDetails .workDetails_text {
    flex-basis: 60%;
}

.workDetails .workDetails_text span {
    font-size: 14px;
}

.workDetails .workDetails_text h3 {
    text-align: left;
    color: #12124c;
}

.workDetails .workDetails_text p {
    display: block;
    padding: 5px 0;
}

.workDetails .workDetails_text .workConcept {
    text-align: justify;
}

.workDetails_text ul {
    list-style-type: circle;
    list-style-position: inside;
}

.workImgShrink figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* start of 最後の一言 div css */
.finalword {
    min-height: 300px;
    position: relative;
}

.finalword p {
    max-width: 750px;
    padding: 30px 80px;
    text-align: justify;
    background-color: #efefef;
    position: absolute;
    top: 15%;
    left: 36%;
    z-index: -1;
}

/* strat of contact（コンタクト）div css */
.contact div {
    width: 100%;
    padding: 30px 0;
    display: flex;
    justify-content: center;
    gap: 80px;
}

/* contact（コンタクト）div 共通コンテナcss */
.contactContainer {
    width: 70px;
    height: 70px;
    background-color: #12124c;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.3s;
}

.contactContainer img {
    display: block;
}

/* email css */
.email:hover {
    background-color: #BB001B;
    transition-duration: 0.3s;
}

.email img:hover {
    transform: scale(0.9);
}


/* instagram css */
.instagram:hover {
    background: linear-gradient(90deg, rgba(255,0,105,1) 0%, rgba(211,0,213,1) 50%, rgba(118,56,250,1) 100%);
    transition-duration: 0.3s;
}

.instagram img:hover {
    transform: scale(0.9);
}

/* facebook css */
.facebook:hover {
    background-color: #1778F2;
    transition-duration: 0.3s;
}

.facebook img:hover {
    transform: scale(0.9);
}

/* whatsapp css */
.whatsapp:hover {
    background-color: #25D366;
    transition-duration: 0.3s;
}

.whatsapp img:hover {
    transform: scale(0.9);
}

/* LinkedIn css */
.linkedin:hover {
    background-color: #0077B5;
    transition-duration: 0.3s;
}

.linkedin img:hover {
    transform: scale(0.9);
}

/* RWD - タブレット用css */
@media screen and (max-width: 900px) {
    main section .introDetails {
        clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0 75%, 0 0);
    }

    main section .introDetails-en {
        height: 430px;
        left: 12%;
        clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0 75%, 0 0);
    }
    
    #changes-modal-button img {
        width: 95%;
    }
}

/* RWD - モバイル用css */
@media screen and (max-width:768px) {
    /* sp用表示 */
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
    /* ヘッダー用css */
    header nav ul,
    .banner {
        width: 100%;
    }

    .PCMenu {
        display: none;
    }

    /* ハンバーガーメニュー css */
    .gMenu {
        background-color: #FFFFFF;
        display: flex;
        flex-wrap: wrap;
        position: fixed;
        right: 0px;
        top: 0;
        width: 100%;
        padding: 20px 30px;
        z-index: 99;
      }
      /* ハンバーガーメニューロゴ設定 */
      .gMenu h1 a {
        background-image: url(../img/logo.png);
        width: 70px;
        height: 70px;
        display: block;
        text-indent: 100%;
        overflow: hidden;
        white-space: nowrap;
    }
      /* メニューアイコンを画面右上に固定しています */
      .gMenu .menu-icon {
        cursor: pointer;
        position: absolute;
        right:40px;
        top: 50px;
        padding-top: 5px;
        height: 12px;
      }
      /* メニューアイコン（三本線）の真ん中の線です */
      .gMenu .menu-icon .navicon {
        background: #12124c; /* 色は自由に変更可能です */
        display: block;
        height: 2px; /* 太さ */
        width: 31px; /* 長さ */
        position: relative;
        transition: background .4s ease-out; /* 形が変わる時のアニメーション */
      }
      /* メニューアイコン（三本線）の上と下の線を疑似要素で追加 */
      .gMenu .menu-icon .navicon::before,
      .gMenu .menu-icon .navicon::after {
        background: #12124c; /* 色は自由に変更可能です */
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .4s ease-out; /* 形が変わる時のアニメーション */
        width: 100%;
      }
      .gMenu .menu-icon .navicon::before {top: 10px;} /* 位置を上にずらしています */
      .gMenu .menu-icon .navicon::after {top: -10px;} /* 位置を下にずらしています */
      /* 表示されるメニューです */
      .gMenu .menu {
        background-color: rgba(255,255,255,0.9);
        overflow: hidden;
        max-height: 0; /* ★最初は高さを0にして非表示状態に */
        transition: max-height .6s; /* 表示されるときのアニメーション */
        text-align: center;
      }
      /* メニュー部分のデザインです */
      .gMenu .menu {
        width: 100%;
        display: flex;
        flex-direction: column;
      }
      .gMenu .menu li a {
        display: block;
        width: 150px;
        margin: 0 auto;
        padding: 15px;
        text-decoration: none;
        text-transform: uppercase;
      }
      .gMenu .menu li a:hover {
        border-bottom: 2px solid #12124c;
        color: #ed1c24;
      }
      /* チェックボックスは常に非表示です */
      .gMenu .menu-btn {
        display: none;
      }

      /* ▼▼▼以下はチェックボックスがONの時の状態です▼▼▼ */
    .gMenu .menu-btn:checked ~ .menu {
        max-height: min-content;
        transition: max-height .6s;
    }
    /* メニューボタンの中央の線を非表示に */
    .gMenu .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}
    
    /* メニューボタンの上下の線を45度傾けて✕印を作ります */
    .gMenu .menu-btn:checked ~ .menu-icon .navicon::before {transform: rotate(-45deg);top: 0;}
    .gMenu .menu-btn:checked ~ .menu-icon .navicon::after {transform: rotate(45deg);top: 0;}

    .gMenu .gMenu_dropdown ul {
        display: none;
    }

    .gMenu .gMenu_dropdown:hover ul {
        display: flex;
        justify-content: center;
    }

    .gMenu .gMenu_dropdown ul a:hover {
        text-decoration: underline 2px #12124c;
        color: #ed1c24;
    }

    /* バナー div css */
    .banner h2 {
        font-size: 30px;
        line-height: 3rem;
        top: 20%;
    }

    /* mainセクション共通css */
    .innerWrap {
        width: 90%;
    }

    main section {
        margin-bottom: 100px;
    }

    main h2 {
       height: 80px;
       font-size: 28px;
       padding-top: 15px;
    }
    
    main h3 {
        font-size: 20px;
    }

    /* introセクションcss */
    main section .introDetails {
        height: 400px;
        padding: 30px 20px 20px 20px;
        left: 0;
        clip-path: polygon(50% 100%, 100% 80%, 100% 0, 0 0, 0 80%);
    }

    .introDetails p {
        height: 390px;
        padding: 0;
    }

    /* My Thoughtsセクションcss */
    .myThoughts ul {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* changeセクションcss */
    .changes {
        flex-direction: column;
    }

    .changesLeft {
        margin-right: 0;
    }

    .changesLeft > p img {
        width: 100%;
    }

    .changesRight {
        margin: 0 auto;
    }

    .changesRight ul li {
        width: 100%;
    }

    /* 自己紹介セクションcss */
    .profile {
        box-shadow: 3px 3px 0px 0px #12124c;
    }

    .profile h2 {
        left: 34%;
        top: -5%;
    }

    .profile_innerWrap {
        flex-direction: column;
        gap: 20px;
    }
    .profile .profile_innerWrap img {
        width: 30%;
    }
    /* 人生年表セクションcss */
    .lifeStory h4 {
            text-align: left;
    }
    
    .timeline {
        width: 100%;
    }

    /* 直線左側に */
    .timeline::after {
        left: 24px;
    }

    .timelineContainer {
        width: 100%;
        padding-left: 65px;
        padding-right: 25px;
        margin-bottom: 35px;
    }

    .left::after,
    .right::after {
        left: 0;
    }

    .right {
        left: 2%;
    }

    /* 年表最後のdiv(to be continued) */
    .lifeStory_lasttext {
        margin: 0;
    }

    /* スキールセクションcss */
    .mySkills {
        clip-path: polygon(71% 0, 100% 2%, 100% 100%, 0 100%, 0 0);
        padding: 20px 10px 0;
    }

    .mySkills ul {
        flex-wrap: wrap;
        margin-bottom: 50px;
        gap: 30px;
    }

    .textcenter P {
        text-align: left;
    }
    /* Softwar & Platforms セクションcss */
    .ITskills {
        flex-wrap: wrap;
    }

    .ITskills ul {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: baseline;
    }

    /* マイブームセクションcss */
    .beforetravel {
        flex-direction: column;
        gap: 30px;
    }

    .beforetravel span {
        writing-mode:horizontal-tb;
        display: block;       
    }

    .beforetravel p {
        padding: 0 25px;
    }

    #modal-button img {
        width: 55%;
    }

    .modal-wrapper .modal-window {
        max-width: 450px ;
    }

    .aftertravel {
        width: 100%;
    }

    .aftertravel_head span {
        margin-bottom: 30px;
    }

    .aftertravel_head p {
        padding: 0 25px;
    }

    /* photogallery css */
    .photogallery {
        flex-wrap: wrap;
        width: 100%;
        gap: 0;
    }

    /* start of My Way div css */
    .myway .mywayInnerwrap {
        flex-direction: column;
        padding: 0 20px;
    }

    .myway .idea ul {
        justify-content: space-around;
    }

    .myway .idea .ideaLeft > p,
    .myway .idea .ideaRight > p {
        text-align: center;
    }

    .myway .idea span {
        writing-mode: horizontal-tb;
        margin: 45px 0;
        padding: 20px 0;
        font-size: 22px;
    }

    /* ストレス div css */
    .stressDescr span {
        padding: 0 20px;
    }

    /* 作品セクションcss */
    .workDetails {
        flex-direction: column;
        gap: 30px;
    }

    .workDetails .workDetails_text {
        width: 100%;
        padding: 0 20px;
    }

    /* start of 最後の一言 div css */
    .finalword {
        position: static;
    }

    .finalword p {
        padding: 15px;
        position: static;
    }

    /* start of contact（コンタクト）div css */
    .contact div {
       flex-wrap: wrap;
    }
}