* {box-sizing: border-box;}
body{max-width:100%; background-color: #ffffff;color:#353535;font-family: "Zen Kaku Gothic New", sans-serif;}
header{width: 100%;}
.visuallyhidden {position: absolute;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(0px 0px 99.9% 99.9%);clip-path: inset(0px 0px 99.9% 99.9%);overflow: hidden;height: 1px;width: 1px;padding: 0;border: 0;}
.category{padding: 0 48px;}
.section{max-width: 1004px;margin: 0 auto; margin-bottom:120px;}
.mv-sec{width:100%;background-color: #FFE4D8;height: 720px;margin-bottom:120px;position: relative; z-index: 5;}

.about-sec{background-color: #ffffff; }
.skill-sec{background-color: #ffffff;}
.work-sec{background-color: #ffffff;}
.contact-sec{background-color: #ffffff;}
footer{background-color: #FFA591;padding: 10px;}
.sns{display: flex;justify-content: center;margin: 16px;}
.icon32{width:32px;}
.icon32gap{padding: 0 12px;}
header ul {padding: 8px; background-color:#FFA591 ;width: 69px;position:fixed; right:48px;top:50px;padding-top: 30px; border-radius: 9999px;z-index: 999;}
header li {margin-bottom:30px;}
header li img{display: block;margin: 0 auto;}

small{display:block; width:210px; margin:0 auto;color:#ffffff;}
.name-logo{font-family: "Akshar", sans-serif;font-weight: 700;font-size:160px;display: block; text-transform: uppercase;position:absolute;left:8px;bottom:120px;-webkit-text-stroke-width:2px;-webkit-text-stroke-color: #FF5B52;color:#35353500;}
.name-logo2{font-family: "Akshar", sans-serif;font-weight: 700;font-size:160px;display: block; text-transform: uppercase;position:absolute;left:8px;bottom:-20px;-webkit-text-stroke-width:2px;-webkit-text-stroke-color: #FF5B52;color:#35353500;}
.box{margin:0 auto;}
.section-title{font-size:142px; font-family: "Akshar", sans-serif;font-weight: 700;text-align: center;text-box:trim-both cap alphabetic;position:relative;top:10px;margin-bottom: 32px;text-transform: uppercase;}


/* contact sec */

.contact-form{display:grid;gap:56px;margin-top: 0px;}
.form-row{display:grid;gap:.4rem}
input,textarea{padding:4px 4px;background-color:#FFE4D8;width:100%}
input{height:84px;}
.contact-container h2{text-align: center;}
.contact-container p{text-align: center;}
.submit-btn{margin:0 auto;}
.submit{background-color: #FF5B52;color:#ffffff;text-align:center;font-size: 24px;padding:22px 138px;}

.sub-title{margin-bottom: 48px;text-align: center;}
.lead{margin-bottom: 56px;text-align: center;line-height: 1.5rem;}


/* about sec */
.profile-box{display:flex;justify-content: space-between;gap: 69px;}
.photo{flex: 1 1 54%;border-radius: 200%;background-color: #ffffff;aspect-ratio: 1 / 1;text-align: center;overflow: hidden;}
.photo img {width:100%;height:100%;object-fit:cover;}
.profile {flex: 1 1 45%;background-color: #ffffff;}
.history,.keyword {width: 100%;letter-spacing: .05rem;line-height: 1.5rem;text-align: left;margin-bottom: 48px;}
.name{font-size: 40px;text-align: center;margin-bottom: 4px;}
.kana{font-size: 16px;text-align: center;margin-bottom: 24px;}
.sns-title,.keyword-title{text-align: center; font-size:24px;font-weight: 700; margin-bottom: 8px;text-transform: uppercase;}
.keyword:last-child{margin-bottom: 0;}







/* work sec */
.card-box{display: flex;width:100%;flex-wrap:wrap;gap:30px;padding-bottom:80px;background-color: #ffffff;}
.card-col3{background-color: #ffffff;width: calc((100% - 60px) / 3);}
.card-img{background-color: #b1b1b1;height:199px;margin-bottom: 16px;overflow: hidden;text-align: center;cursor: pointer;}
.card-img img{width:100%;object-fit: cover;height: auto;transition: transform .6s ease;}
.card-img:hover img {transform: scale(1.1);}
.card-title{background-color: #ffffff;border-left:8px solid #FF5B52;font-size:24px;font-weight: 500;margin-bottom: 16px;padding-left: 16px;}
.card-description{background-color: #ffffff;}
.card-description p{line-height: 1.5rem;}
.card-box:last-child{padding-bottom:0px;}






/* skills */
.content_area {width: 100%;max-width: 1004px;margin: 0 auto;}
.tab-container {display:flex;flex-wrap:wrap;}
.tab-container {margin: 0 0 15px;}
.tab {font-weight: 500;text-align:center;width: calc(100% / 12);padding: 8px;background-color: #ffffff;cursor: pointer;}
.tab.active {background-color: #FF5B52;border-radius: 8px;}
.content{display: none;height:10rem;background-color: #ffffff;padding: 10px;border: 1px solid #FF5B52;line-height: 1.5rem;}
.content.show {display: block;}
h3{font-size:18px;margin-bottom:4px;font-weight: 900;}


@media (max-width: 768px) {
img{width:100%}
/* mv sec */
.name-logo{font-size:88px; text-transform: uppercase;position:absolute;left:8px;top:20px;writing-mode: vertical-rl;}
.name-logo2{font-size:88px; text-transform: uppercase;position:absolute;top:300px;writing-mode: vertical-rl;display: flex;}
/* 各セクション */
.sum{display:none;}
.section-title{font-size:56px;}
.category{padding: 0 32px;}

/* about */
.profile-box {flex-direction: column;gap: 20px;}/* profile-box: 要素を縦に折り返す */
.photo {flex: 0 0 100%;width: 100%;margin: 0 auto;}/* photo: 縦積みになったら横幅いっぱいに広げる */
.profile {flex: 0 0 100%;width: 100%;}/* profile: 縦積みになったら横幅いっぱいに広げる */

/* skills */
.tab{font-weight: 500;text-align:center;width: calc(100% / 3);padding: 8px;background-color: #ffffff;cursor: pointer;}

/* contact */
.submit{background-color: #FF5B52;color:#ffffff;text-align:center;padding:15px 60px;font-size: 16px;}
/* nav */
header ul {padding: 4px; background-color:#FFA591 ;width: 40px;position:fixed; right:10px;top:10px;padding-top: 30px;border-radius: 9999px;z-index: 999;}
header li a{display: inline-block; width: auto; margin: 0 auto;}
header li{margin-bottom: 20px;}
header li:last-child{margin-bottom: 0;}
header li img{width: 32px; display: block; margin: 0 auto;padding: 0;}
/* work sec */
.card-box {flex-direction: column;gap: 40px;padding-bottom: 40px;}
.card-col3 {width: 100%;max-width: none;cursor: pointer;}
.card-img {height: auto;}
}