@charset "UTF-8";
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Shippori Mincho B1', serif;
    color: #333;
    font-size: 16px;
    width: 70%;
    margin: 0 auto;
    letter-spacing: 0.2em;
    line-height: 1.7;
}

header {
    height: 80px;
    display: flex;
    align-items: center;
    position: relative;
}

.drawer {
    display: none;
}

nav {
    width: 100%;
    position: relative;
}

header ul {
    width: 60%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

header ul li a {
    transition: all 0.2s ease;
}

header ul li a:hover {
    opacity: 0.6;
}

.mainvisual {
    height: calc( 100vh - 80px);
}

.mainvisual_wrap {
    display: flex;
    align-items: center;
    height: 75vh;
    background-image: url(../image/mainvisual.jpg);
    background-repeat: no-repeat;
    background-position: 0 90%;
    background-size: cover;
}

.mainvisual_container {
    width: 100%;
    text-align: center;
}

.mainvisual_container img {
    width: 20%;
}

.mainvisual_container p {
    font-size: 2em;
    color: white;
    padding: 20px 0;
}

section {
    margin-top: 120px;
}


/* セクションの見出し */
h2 {
    font-size: 2.2em;
    text-align: center;
    position: relative;
    margin-bottom: 70px;
}

h2 span {
    position: relative;
    display: inline-block;
}

h2 span::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../image/point_left.svg) no-repeat;
    background-size: contain;
    margin-right: 1em;
}

h2 span::after {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../image/point_right.svg) no-repeat;
    background-size: contain;
    margin-left: 1em;
}


/* 各セクションの英字 */
    h2::after {
        position: absolute;
        font-size: 0.5em;
        color: #d59b00;
        top: 95%;
        left: 50%;
        transform: translateX(-50%);
    }

    #works h2::after {
        content: "works";
    }

    #profile h2::after {
        content: "profile";
    }

    #skil h2::after {
        content: "skil";
    }

/* セクションの見出しここまで */

.works_wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.works_wrap:after {
    content: "";
    display: block;
    width: calc( 100% / 3 - 10px);  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

.works_box {
	width: calc( 100% / 3 - 10px);
    margin-bottom: 20px;
    height: 250px;
	overflow: hidden;
	position: relative;	/* 相対位置指定 */
    border: 1px solid #ddd;
    text-align: center;
}

.works_box img  {
   height: 100%;
    object-fit: contain;
}

.works_box .works_caption {
    width: 90%;
    height: 70%;
    background-color: white;
    opacity: 0.7;
    border-radius: 10px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.works_box .works_caption p {
    width: 100%;
	text-align: center;
}


.works_box .works_mask {
	width: 100%;
	height: 100%;
	position: absolute;	/* 絶対位置指定 */
	top: 0;
	left: 0;
	opacity: 0;	/* マスクを表示しない */
	background-color: rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:	all 0.2s ease;
    display: flex;
    align-items: center;
}

.works_box:hover .works_mask {
	opacity: 1;	/* マスクを表示する */
}

.works_wrap_a {
    width: fit-content;
    margin: 0 auto;
}

.works_wrap_a a {
    display: block;
    border-radius: 40px;
    border: 1px solid #333;
    padding: 20px 40px;
    margin-top: 20px;
    transition: all 0.1s linear;
}

.works_wrap_a a:hover {
    background-color: #f4e5c1;
    opacity: 0.6;
}

.works_wrap_a span:after {
    content: "\f105";
    font-weight: 600;
    font-family: Font Awesome\ 5 Free;
    padding-left: 10px;
}

.profile_wrap {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.profile_box {
    margin: 0 50px;
    width: 45%;
    min-width: 350px;
    max-width: 500px;
    border: solid #333 1px;
    padding: 30px;
}

.profile_box h3 {
    font-size: 1.4em;
    color: #d59b00;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 70px;
    position: relative;
}

.profile_nenpyo {
    width: 70%;
    min-width: 680px;
    margin-left: 5%;
    margin-bottom: 80px;
}

/* 経歴前のh3タグ */
.line_h3 {
    width: fit-content;
    font-size: 1.2em;
    border-top: 1px solid #d59b00;
    border-bottom: 1px solid #d59b00;
    padding: 10px 30px;
    margin: 80px auto 0;
}

/* 年表頭だけpadding */
.profile_nenpyo dl dt:first-child, .profile_nenpyo dl dd:first-of-type {
    padding-top: 30px;
}

.a::after {
    padding-top: 20px;
}

.profile_nenpyo dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
.profile_nenpyo dl dt {
    text-align: right;
    width: 9.5em;
    padding: 0.5em 1.0em 0.5em 0.5em;
    position: relative;
  }
  
.profile_nenpyo dl dt::after {
    content: '●';
    position: absolute;
    right: -0.7em;
    top: 3px;
    font-size: 1.3em;
    color: #d59b00;
  }
  
.profile_nenpyo dl dd {
    width: calc(100% - 9.5em);
    padding: 0.3em 2.0em 3.0em;
    border-left: 1px solid #ccc;
  }
  
.profile_nenpyo dl dd h4 {
    font-size: 1.1em;
    font-weight: bold;
    margin: 0 0 5px;
  }


.profile_my_wrap {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.profile_my_img {
    width: 40%;
    margin: 0 auto;
}

.profile_my_img img  {
    width: 100%;
}

.profile_my_text {
    width: 60%;
    padding-left: 5%;
}

.profile_my_text dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.profile_my_text dl dt {
    width: 30%;
    border-bottom: 1px solid #000;
    padding: 10px 0 10px 10px;
    text-align: center;
}

.profile_my_text dl dd {
    width: 70%;
    border-bottom: 1px solid #000;
    padding: 10px 0 10px 10px;
}


.skil_box {
    width: 40%;
    min-width: 312px;
    margin: 0 auto;
    background-color: #f4e5c1;
    border-radius: 30px;
    padding: 20px 0;
}

.skil_box ul {
    width: fit-content;
    margin: 0 auto;
    list-style: circle;
    line-height: 4;
}

footer {
    padding: 70px 0 10px;
}

footer small {
    display: block;
    text-align: center;
}


/* トップに戻るボタン */
#pagetop {
    position: fixed;
    right: 1%;
    bottom: 2%;
    margin: 0;
    
}
#pagetop a {
    position: relative;
    display: flex;
    width: 70px;
    height: 70px;
    justify-content: center;
    background:#8bd6fd;
    transition: opacity .6s ease;
    color: #FFF;
    align-items: center;
    text-decoration: none;
    font-size: 40px;
    border-radius:100%;
}
#pagetop a:hover {
    opacity: .5;
}

/* works */
.works header p, .works_detail header p {
    position: absolute;
    top: 0;
    left: -19%;
    padding-top: 10px;
}

.works header p img, .works_detail header p img {
    width: 10%;
}

/* works詳細 */
.works_detail .breadcrumbs ul {
    display: flex;
    margin-top: 60px;
}

.works_detail .breadcrumbs ul li {
    font-size: 0.8em;
}

.works_detail .breadcrumbs ul li::after {
    content: "\f105";
    font-weight: 600;
    font-family: Font Awesome\ 5 Free;
    padding: 0 15px; 
}

.works_detail .breadcrumbs ul li a {
    transition: all 0.1s linear;
}

.works_detail .breadcrumbs ul li a:hover {
    opacity: 0.6;
}

.works_detail h2 {
    margin-top: 60px
}

.works_detail_box p {
    text-align: center;
}

/* .works_detail_box p img {
    width: 80%;
} */

.works_detail_box p a {
    display: block;
    width: fit-content;
    margin: 50px auto 0;
    border-radius: 40px;
    border: 1px solid #333;
    padding: 20px 40px;
    transition: all 0.1s linear;
}

.works_detail_box p a:hover {
    background-color: #f4e5c1;
    opacity: 0.6;
}

.works_detail_box p span:after {
    content: "\f35d";
    font-weight: 600;
    font-family: Font Awesome\ 5 Free;
    padding-left: 10px;
}

.works_detail_box_text {
    margin-top: 70px; 
}

.works_detail_box_line {
    width: 30%;
    border-bottom: 1px solid #d59b00;
    margin: 50px auto;
    position: relative;
}

.works_detail_box_text p a {
    display: inline;
    padding: 0;
    margin: 0 5px;
    border: none;
    border-bottom: dashed 1px #333;
    border-radius: 0;
}

.works_detail_box_text h3 {
    text-align: center;
    margin-bottom: 20px;
}

.works_detail_box_text_kankyo {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.works_detail_box_text_kankyo span {
    display: block;
    width: fit-content;
    color: #d59b00;
    padding: 0 5px;
    border: 1px solid #d59b00;
    border-radius: 10px;
    margin: 5px 5px;
}

.works_detail_box .modoru {
    margin-top: 100px;
}

.works_detail_box .modoru span::after {
    content: "\f104";
    font-weight: 600;
    font-family: Font Awesome\ 5 Free;
    padding-right: 10px;
    padding-left: 0;
}

.works_detail_box .modoru a {
    display: inline;
    border: none;
    padding: 20px;
    transition: all 0.1s linear;
}

.works_detail_box .modoru a:hover {
    background-color: transparent;
    opacity: 0.6;
}


/* ページ送りリンク */
    .works_back_next {
        position: relative;
    }

    .works_back a, .works_next a {
        width: 10vw;
        height: 10vw;
        position: fixed;
        color: white;
        font-size: 2vh;
        writing-mode: vertical-rl;
        background-color: #d59b00;
        border-radius: 50%;
        top: 30%;
        display: flex;
        transition: all 0.2s ease;
    }

    .works_next a {
        left: -5%;
    }

    .works_back a {
        right: -5%;
    }

    .works_back_span, .works_next_span {
        display: block;
        height: fit-content;
        margin: auto 0;
    }

    .works_next_span {
        margin-right: 15%;
    }

    .works_back_span {
        margin-right: 65%;
    }

    .works_back_span_sp, .works_next_span_sp {
        display: none;
    }

    .works_next a:hover {
        left: -6%;
    }
    
    .works_back a:hover {
        right: -6%;
    }


/* レスポンシブ */
@media screen and (max-width:767px) {
    body {
        font-size: 14px;
        width: 90%
    }

    .mainvisual {
        width: 90%;
        margin: 0 auto;
    }

    .mainvisual_wrap {
        background-position: center;
    }

    .works_wrap p a {
        padding: 10px 25px;
    }

    .mainvisual_container img {
        width: 40%;
    }

    section {
        margin-top: 80px;
    }
    
    h2 {
        font-size: 1.7em;
        margin-bottom: 50px;
    }

    .works_wrap {
        flex-direction: column;
    }

    .works_box {
        width: 100%;
        height: 150px;
    }

    .works_box img {
        width: 100%;
        object-fit: cover;
    }

    .profile_wrap {
        flex-direction: column;
    }

    .profile_box {
        width: 100%;
        min-width: auto;
        max-width: fit-content;
        margin: 0 0 30px;
        padding: 25px;
    }

    .profile_box h3 {
        font-size: 1.2em;
        margin-bottom: 50px;
    }

    .profile_nenpyo {
        width: 100%;
        min-width: auto;
        margin-left: 0;
    }

    .profile_nenpyo dl dt {
        width: 7.5em;
    }

    .profile_nenpyo dl dd {
        width: calc(100% - 7.5em);
        padding: 0.3em 0 2.5em 1em;
    }

    .profile_my_wrap {
        flex-direction: column;
    }

    .profile_my_img {
        width: 100%;
        margin: 0;
    }

    .profile_my_text {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
    }

    /* ハンバーガーメニュー */
        .drawer {
            display: block;
        }

        header ul {
            width: 100%;
            flex-direction: column;
        }
        
        header ul li {
            text-align: center;
            padding: 20px;
            position: relative;
        }
        
        header ul li:after {
            position: absolute;
            top: 100%;
            right: 20%;
            content: "";
            width: 150px;
            border-bottom: 1px solid #333;
        }
        
        header ul li:last-child:after {
            border-bottom: none;
        }
        
        .Toggle {
            display: block;
            position: fixed;    /* bodyに対しての絶対位置指定 */
            width: 42px;
            height: 42px;
            cursor: pointer;
            z-index: 3;
            right: 5%;
            top: 3%;
        }
        
        .Toggle span {
            display: block;
            position: absolute;
            width: 40px;
            border-bottom: solid 4px #333;
            -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
            -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
            transition: .35s ease-in-out;			/*変化の速度を指定*/
        
        }
        /*各ボーダー少しずつずらす*/
        .Toggle span:nth-child(1) {
            top: 5px;
        }
        .Toggle span:nth-child(2) {
            top: 15px;
        }
        .Toggle span:nth-child(3) {
            top: 26px;
        }
        .Toggle.active span:nth-child(1) {
            top: 18px;
        /* 1番目のspanをマイナス45度に */
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        
        /* 2番目と3番目のspanを45度に */
        .Toggle.active span:nth-child(2),
        .Toggle.active span:nth-child(3) {
            top: 18px;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        
        .menu.open {
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        
        .menu{
            display: flex;
            align-items: center;
            position: fixed;
            z-index: 3;
            top: 10%;
            left: 50%;
            width: 250px;
            height: 250px;
            margin:0 auto;
            border: 1px solid #333;
            border-radius: 50%;
            background-color: white;
            -webkit-transform: translateX(-300%);
            transform: translateX(-300%);
            transition: all 0.2s ease;
            }
    /* ハンバーガーここまで */

    /* works */
    .works header p, .works_detail header p {
        top: 5%;
        left: 0%;
    }

    .works header p img, .works_detail header p img {
        width: 12%;
    }

    .works_detail h2 {
        font-size: 1.5em;
    }

    .works_detail h2 span::before, .works_detail h2 span::after {
        display: none;
    }

    .works_detail_box p img {
        width: 100%;
    }

    .works_detail_box p {
        text-align: left;
    }

    .works_detail_box p a {
        padding: 10px 25px;
    }

    .works_detail_box_text p a {
        padding: 0;
    }

    /* トップに戻るボタン */
        #pagetop a {
            width: 0;
            height: 0;
        }
        
        #pagetop i {
            width: 0;
            height: 0;
        }

    /* ページ送りリンク */
        .works_back_span, .works_next_span {
            display: none;
        }

        .works_back_span_sp, .works_next_span_sp {
            display: block;
            margin: auto 0 auto 5px;
        }

        .works_next_span_sp {
            width: 100%;
            text-align: right;
            margin-left: 0;
            margin-right: 5px;
        }

        .works_back a, .works_next a {
            writing-mode: horizontal-tb;
            top: 50%;
            width: 12vw;
            height: 12vw;
    }


}