@charset "UTF-8";

/* ======================
   全体
====================== */

html,body{
margin:0;
overflow-x:hidden;
font-family:"Noto Sans JP",sans-serif;
background:#f4f4f4;
color:#333;
}

img{
max-width:100%;
height:auto;
display:block;
}

.container{
max-width:900px;
margin:auto;
padding:40px 20px;
box-sizing:border-box;
}

/* ======================
SP MENU
====================== */

.spmanu input{
display:none;
}

#overlay-button{
position:fixed;
top:30px;
right:20px;
padding:26px 11px;
cursor:pointer;
z-index:10001;
}

#overlay-button span{
display:block;
width:35px;
height:4px;
background:#17458F;
border-radius:2px;
position:relative;
transition:.3s;
}

#overlay-button span:before,
#overlay-button span:after{
content:"";
position:absolute;
width:35px;
height:4px;
background:#17458F;
border-radius:2px;
transition:.3s;
}

#overlay-button span:before{
top:-10px;
}

#overlay-button span:after{
top:10px;
}

.spmanu input:checked + #overlay-button span{
background:transparent;
}

.spmanu input:checked + #overlay-button span:before{
transform:rotate(45deg) translate(7px,7px);
}

.spmanu input:checked + #overlay-button span:after{
transform:rotate(-45deg) translate(7px,-7px);
}

#overlay{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;

background:url("image/menubg.jpg") center/cover no-repeat;

visibility:hidden;
opacity:0;
transition:.35s;
z-index:10000;
}

.spmanu input:checked ~ #overlay{
visibility:visible;
opacity:1;
}

#overlay ul{
list-style:none;
padding-top:30%;
padding-left:18%;
height:100vh;
}

#overlay ul li{
margin:18px 0;
}

#overlay ul li a{
color:#333;
text-decoration:none;
font-size:22px;
}

.mini{
font-size:16px;
margin-left:20px;
padding-left:10px;
border-left:1px solid #333;
}

.sns{
position:absolute;
left:18%;
bottom:20%;
width:40px;
}

.sns img{
width:100%;
}

@media (min-width:769px){
.spmanu{
display:none;
}
}


/* ======================
   ヘッダー
====================== */

header{
background:url("image/bg1.jpg") center/cover no-repeat;
min-height:100vh;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

text-align:center;
padding:40px 20px;
box-sizing:border-box;

position:relative;
overflow:hidden;
}

/* 光レイヤー */

header::before{
content:"";
position:absolute;

/* 中央配置 */

top:50%;
left:50%;
width:200%;
height:200%;

transform:translate(-50%,-50%);
transform-origin:center;

/* ホログラム色 */

background:linear-gradient(
120deg,
rgba(255,0,200,0.35),
rgba(0,200,255,0.35),
rgba(255,255,0,0.35),
rgba(0,255,150,0.35)
);

opacity:.6;

animation:holoMove 10s linear infinite;

pointer-events:none;
z-index:1;
}

@keyframes holoMove{

0%{
transform:translate(-50%,-50%) rotate(0deg);
}

100%{
transform:translate(-50%,-50%) rotate(360deg);
}

}

/* コンテンツ前面 */

header > *{
position:relative;
z-index:2;
}

header h1{
font-size:22px;
letter-spacing:6px;
color:#606060;
}


/* ======================
   ヘッダー メンバー一覧
====================== */



.member-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px;
width:100%;
max-width:420px;
margin:30px auto 0;
padding:0 20px;
box-sizing:border-box;
}

.member-grid a{
display:block;
}

.member-grid img{
aspect-ratio:1/1;
object-fit:cover;
border-radius:50%;
}


/* ======================
   PRO画像
====================== */

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

.pro img{
width:100%;
max-width:360px;
}


/* ======================
   メンバー
====================== */

.member{
margin-bottom:80px;
}



/* ======================
   メンバー写真
====================== */

.photo{
width:100%;
margin-left:0;
}

.photo img{
width:100%;
}


/* ======================
   メンバー詳細
====================== */

.role{
color:#ff5a2e;
letter-spacing:2px;
font-size:16px;
}


/* 名前 */

.name{
font-size:34px;
letter-spacing:6px;
margin:5px 0 20px;
display:inline-block;
padding-bottom:6px;
position:relative;
white-space:nowrap;
}


/* 下線アニメーション */

.name::after{
content:"";
position:absolute;
left:0;
bottom:0;
height:4px;
width:0;
background:#ff5a2e;
transition:width .8s ease;
}

.name.active::after{
width:100%;
}


/* ======================
   Instagram
====================== */

.insta{
margin:10px 0 20px;
}

.insta a{
display:inline-flex;
align-items:center;
gap:8px;
text-decoration:none;
color:#000;
font-size:16px;
}

.insta img{
width:22px;
}

/* ======================
   profile2 カラー
====================== */

.profile2 .role{
color:#6c3e80;
}

.profile2 .name::after{
background:#6c3e80;
}

.profile2 .label{
background:#6c3e80;
}

.profile2 .food-title{
color:#6c3e80;
}

.profile2 .message-title{
color:#6c3e80;
}

/* ======================
   profile3 カラー
====================== */

.profile3 .role{
color:#e16ba0;
}

.profile3 .name::after{
background:#e16ba0;
}

.profile3 .label{
background:#e16ba0;
}

.profile3 .food-title{
color:#e16ba0;
}

.profile3 .message-title{
color:#e16ba0;
}

/* ======================
   profile4 カラー
====================== */

.profile4 .role{
color:#aa1737;
}

.profile4 .name::after{
background:#aa1737;
}

.profile4 .label{
background:#aa1737;
}

.profile4 .food-title{
color:#aa1737;
}

.profile4 .message-title{
color:#aa1737;
}

/* ======================
   profile5 カラー
====================== */

.profile5 .role{
color:#3791db;
}

.profile5 .name::after{
background:#3791db;
}

.profile5 .label{
background:#3791db;
}

.profile5 .food-title{
color:#3791db;
}

.profile5 .message-title{
color:#3791db;
}

/* ======================
   profile6 カラー
====================== */

.profile6 .role{
color:#89a818;
}

.profile6 .name::after{
background:#89a818;
}

.profile6 .label{
background:#89a818;
}

.profile6 .food-title{
color:#89a818;
}

.profile6 .message-title{
color:#89a818;
}




/* ======================
   プロフィール表
====================== */

.info-grid{
display:grid;
grid-template-columns:auto 1fr;
gap:10px 20px;
width:70%;
margin-left:auto;
margin-top:30px;
}

.label{
background:#ff5a2e;
color:#fff;
padding:6px 10px;
font-size:14px;
display:inline-block;
width:fit-content;

/* アニメーション */

opacity:0;
transform:translateY(20px);
transition:all .6s ease;
}

.label.active{
opacity:1;
transform:translateY(0);
}

.value{
font-size:16px;
white-space:nowrap;
}


/* ======================
   Favorite Foods
====================== */

.food-title{
width:70%;
margin-left:auto;
display:grid;
grid-template-columns:160px 1fr;
color:#ff5a2e;
margin-top:10px;
}

.food{
width:70%;
margin-left:auto;
grid-column:1 / -1;
margin-bottom:30px;
}


/* ======================
   メッセージ
====================== */

.message-area{
display:flex;
gap:40px;
align-items:flex-start;
}

.message-title{
font-size:32px;
color:#ff5a2e;
letter-spacing:4px;
}

.message{
line-height:1.9;
}


/* ======================
   タブレット / PC
====================== */

@media (min-width:768px){

.member{
display:flex;
align-items:flex-start;
}

.photo{
flex:0 0 45%;
}

.profile{
margin-left:40px;
}

}


/* ======================
   スマホ
====================== */

@media (max-width:768px){

header{
height:100svh;
}

/* テキスト位置 */

.role,
.name,
.insta{
margin-left:30%;
}

/* プロフィール位置 */

.profile,
.profile2,
.profile3,
.profile4,
.profile5,
.profile6{
position:relative;
transform:translateY(-130px);
}

/* value折り返し */

.value{
white-space:normal;
word-break:break-word;
}

/* 表幅 */

.info-grid,
.food-title,
.food{
width:70%;
margin-left:auto;
}

/* メッセージ */

.message-area{
flex-direction:column;
align-items:center;
text-align:center;
gap:10px;
}

/* メンバー縦並び */

.member{
flex-direction:column;
text-align:center;
}
	
.photo{
width:100vw;
margin-left:calc(50% - 50vw);
}

.photo img{
width:100%;
display:block;
}
	

}