/* ---------------共通設定-------------- */
html {
	scroll-behavior: smooth;
}

body {
    display: flex; /* フレックスボックスに有効に */
    flex-flow: column; /* 要素を縦に並べる */
    min-height: 100vh; /* 最小でも画面の高さ分のbodyの高さを担保する */
}

/* ---------幅調整--------- */
body,main,header,footer,
#fv,#skill,.skill-box-1,.skill-box-2,
.about-box-1,.about-box-2,.about-box-3 {
    width: 1440px;
    margin: 0 auto;
}

.header-inner,
.can-container,
.tool-container,
.footer-inner{
    width: 1080px;
    height: auto;
    margin: 0 auto;
}

.about-container,
.hobby-container {
    width: 1080px;
    height: auto;
    margin: 40px auto;
}

/* -----フォントサイズ------ */
h2,.mirai {font-size: 40px;}
h3 {font-size: 24px;}
h4, .contact-title {font-size: 20px;}
.name,p {font-size: 16px;}
.header-menu ul li a,
.footer-menu ul li a {font-size: 14px;}
.copy-right {font-size: 13px;}

/* ----フォント種類・太さ----- */
.name {font-weight: lighter;}
h2,h3,h4,.contact-title {font-weight: bold;}
.mirai {
    font-weight: normal;
    font-family: "Zen Antique", serif;
    margin: 0;
}
h2,.name {
    font-family: "Unna", serif;
    font-style: normal;
}

/* -----行間・文字幅------ */
p,h4 {letter-spacing: 2px;}

.fv-text,
.profile-text,
.point-text {line-height: 40px;}
.can-text ,
.tool-text {line-height: 20px;}
.hobby-text {line-height: 50px;}

/* --------デコレーション-------- */
h2{
    display: inline; 
    border-bottom: 2px solid #2F96A8;
    padding: 5px;
    margin: 0;
}
.section-title {
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
}

h4::before{
    content: url(image/dot.png);
    padding: 5px;
}

.sub-title {
    background-image: url(image/h3-backgraund.png);
    background-repeat: no-repeat;
    background-size: 220px 90px;
    width: 220px;
    height: 90px;
    object-fit: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

/* -----------------ヘッダー・フッターここから --------------*/
header,footer{
    background-color: #E5F5F7;
}

header {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;

}
.header-inner,
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.name {
    text-decoration: none;
    color: black;
    padding-left: 10px;
}
.header-menu {
    width: 312px;
    height: auto;
}

.header-menu ul,
.footer-menu ul{
    display: flex;
    justify-content: space-between;
}

.header-menu ul li,
.footer-menu ul li {
    list-style: none;
}

.header-menu ul li a,
.footer-menu ul li a {
    text-decoration: none;
    color: black;
}

footer {
    height: 250px;
    display: block;
    margin-top: 80px;
}

.cntact-box {
    width: 200px;
    height: auto;
    margin: 0 auto;
    text-align: center;
    padding-top: 80px;
}

.footer-menu {
    width: 300px;
    height: auto;
}

.contact-title {
    display: flex;
    justify-content: center;
}
.contact-title::after{
    content: url(image/tabler_mail.png);
}

/* ---------------ヘッダー・フッターここまで------------ */


/* ---------------FVここから------------ */
#fv {
    height: 684px; 
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fv-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1440px; 
    margin: 0 auto;
}

.fv-box {
    width: 480px;
    background: #E5F5F7;
    box-shadow: -20px -20px 0 #f5f5f5;
    padding: 60px 50px;
    z-index: 2;
    position: relative;
    margin-left: 120px;
}

.fv-contents {
    width: 100%;
    margin: 0;
}

.fv-img {
    width: 830px; 
    height: 680px;
    object-fit: cover;
    margin-left: -100px; /* ボックスと画像を部分的に重ねる場合に調整 */
    z-index: 1;
}

/* ---------------FVここまで------------ */

/* ---------SKILLここから-------------*/

.can-container,
.tool-container {
    display: flex;
    justify-content: space-between;
}

.skill-box-1 {
    height: 773px;
    background-image: url(image/can-backgraund.png);
    background-repeat: no-repeat;
    object-fit: cover;
}
.skill1-img {
    width:630px ;
    height: 440px;
    object-fit: cover;
    margin-top: 160px;
}

.tool-container{margin-top: 40px;}

.skill-box-2 {
    height: 730px;
    background-image: url(image/skill-backgraund.png);
    background-repeat: no-repeat;
    object-fit: cover;
}

.skill2-img {
    width: 570px;
    height: 410px;
    object-fit: cover;
    margin-top: 200px;
}

.can-contents {
    width: 250px;
    height: auto;
    margin-left: 40px;
    margin-top: 40px;
}

.tool-contents {
    width: 450px;
    height: auto;
    margin-left: 40px;
    margin-top: 40px;
}

.tool-box {padding-top: 40px;}

.can-text ,
.tool-text {
    padding: 10px 0px 10px 25px;
}

/* ---------SKILLここまで-------------*/

/* ---------------------about.html --------------------*/



.about-box-1 {
    height: 675px;
    background-image: url(image/about-backgraund-1.png);
    background-repeat: none;
    object-fit: cover;
}

.about-box-2 {
    height: 525px;
}

.about-box-3 {
    height: 675px;
    background-image: url(image/about-backgraund-2.png);
    background-repeat: none;
    object-fit: cover;
}

.about-container {
    padding-top: 10px;
}

.about-container > h3 {
    margin: 0 auto;
    margin-top: 40px;
}

.profile-box,
.hobby-box,
.point-box {
    display: flex;
    justify-content: space-between;
}

.point-box {
    padding-top: 100px;
}
.face-icon {
    width: 400px;
    height: 400px;
    border-radius: 200px;
}

.hobby-images {
    display: flex;
    justify-content: center;
    width: 570px;
    height: auto;
}
.handmade-img {
    width: 250px;
    height: 200px;
    object-fit: cover;
    position: absolute;
    top: 1300px;
    right: 420px;

}

.sakura-img {
    width: 320px;
    height: 380px;
    object-fit: cover;
    position: absolute;
    top: 1050px;
    right: 100px;
}

.cafe-img {
    width: 300px;
    height: 350px;
    object-fit: cover;
    margin-left: 80px;
}

.profile-text{
    margin-top: 20px;
}

.profile-text > p {
    margin-bottom: 40px;
}

.hobby-text {
    width: 350px;
    margin-left: 40px;
}

.point-contents {
    margin-top: 80px;
}
.point-content {
    margin-bottom: 40px;
}

.point-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.point-text {
    padding-left: 35px;
}