@charset "utf-8";
/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none;}table{border-collapse:collapse;border-spacing:0;}img{vertical-align:bottom;}input[type="text"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:none;}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:none;cursor:pointer;background:none;padding:0;}h1,h2,h3,h4,h5,h6{font:inherit;}
/*================================================
 *  一般・共通設定
 ================================================*/
:root {
	--background:#F3F3F3;
	--white:#FFF;
	--purple:#7E77B6;
	--pink:#00A0C0;
	--hotpink:#E21451;
}
html {
	font-size:62.5%;
}
body {
	background:var(--background);
	font-size:1.2rem;
	line-height:1;
	color:var(--text);
	font-weight:400;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	-moz-text-size-adjust:100%;
	text-size-adjust:100%;
	font-family:"メイリオ","ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "游明朝体", "Yu Mincho", YuMincho, "MS P明朝", "MS PMincho", serif;
}
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}
.mplus1p {
	font-family:"M PLUS 1 Code", monospace;
	font-optical-sizing:auto;
	font-weight:<weight>;
	font-style:normal;
}
a {
	text-decoration:none;
	transition:all ease-in-out 0.5s;
}

#wrapper {
	position:relative;
	display:flex;
	justify-content:center;
	flex-direction:row;
	margin:0 auto;
}
#container {
	position:relative;
	display:flex;
	flex-direction:column;
	background:var(--white);
	width:64rem;
	height:100dvh;
	overflow-x:hidden;
	margin:0;
}






@media screen and (max-width:640px) {
#container {
	width:100vw;
	height:auto;
	overflow-x:clip;
	margin:0;
}



}
/*================================================
 *  ヘッダー
 ================================================*/
header {
	display:flex;
	justify-content:space-between;
	align-content:center;
	align-items:center;
	width:100%;
	height:100px;
	padding:0 40px;
}
header h1 {
	display:flex;
	align-content:center;
	align-items:center;
	height:100px;
}
header h1 img {
	width:auto;
	height:50px;
	line-height:0;
}
header .btn {
}
header .btn a {
	display:block;
	background:var(--purple);
	height:50px;
	font-size:2rem;
	color:var(--white);
	line-height:50px;
	padding-left:50px;
	padding-right:50px;
	border-radius:50px;
}
header .btn a:hover {
	opacity:0.7;
}
@media screen and (max-width:640px) {
header {
	height:5rem;
	padding:0 3%;
}
header h1 {
	height:5rem;
}
header h1 img {
	width:auto;
	height:2.5rem;
	line-height:0;
}
header .btn {
}
header .btn a {
	height:2.5rem;
	font-size:1.2rem;
	color:var(--white);
	line-height:2.5rem;
	padding-left:3rem;
	padding-right:3rem;
}
}
/*================================================
 *  メイン
 ================================================*/
.top {
	position:relative;
}
.main-img img {
	width:100%;
	line-height:0;
}
.sub-img li.current img {
	border:solid 2px var(--purple);
	transition:border 0.5s;
}
.sub-img {
	display:flex;
	padding-left:2%;
	padding-right:2%;
	margin:10px auto;
}
.sub-img li {
	width:calc(90% / 5);
	max-width:110px;
	margin-right:2%;
}
.sub-img li:last-child {
	margin-right:0;
}
.sub-img li img {
	border:solid 2px transparent;
	transition:border 0.5s;
}
.sub-img li img {
	width:100%;
	height:110px;
	line-height:0;
	object-fit:cover;
	cursor:pointer;
	border-radius:50%;
}
p.name {
	position:absolute;
	content:"";
	top:75%;
	left:5%;
	font-size:26px;
	color:var(--white);
	text-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
}
.entry-box {
	padding-left:30px;
	padding-right:30px;
}
.entry-box a {
	display:block;
	background:var(--purple);
	height:50px;
	font-size:2rem;
	line-height:50px;
	text-align:center;
	color:var(--white);
	border-radius:50px;
}
.entry-box .txt {
	display:block;
	width:400px;
	font-size:1.6rem;
	margin:1rem auto 0;
}
main h3.tab {
	position:relative;
	background:var(--purple);
	height:60px;
	line-height:60px;
	padding-left:50px;
	padding-right:50px;
	margin-top:30px;
}
main h3.tab::before {
	position:absolute;
	content:"";
	top:50%;
	left:30px;
	display:inline-block;
	background:url(../images/speech-bubble.png) no-repeat;
	background-size:cover;
	width:54px;
	height:48px;
	transform:translateY(-50%);
}
main h3.tab span {
	display:inline-block;
	font-size:2rem;
	color:var(--white);
	margin-left:40px;
}
.self-introduction {
	display:flex;
	justify-content:space-between;
	padding-top:30px;
	padding-left:2%;
	padding-right:2%;
}
.self-introduction .info-img {
	width:100px;
	height:auto;
}
.self-introduction .info-img img {
	width:100px;
	height:100px;
	line-height:0;
	object-fit:cover;
	border-radius:50%;
}
.self-introduction .info-txt {
	position:relative;
	background:#D2CFEB;
	width:calc(100% - (100px + 70px ));
	padding:20px;
	border:solid 2px #7E77B6;
	border-radius:10px;
}
.self-introduction .info-txt::after,.self-introduction .info-txt::before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:24%;
}
.self-introduction .info-txt::after{
    border-color:rgba(210, 207, 235, 0);
    border-top-width:0;
    border-bottom-width:14px;
    border-left-width:33px;
    border-right-width:33px;
    margin-top:-14px;
    border-right-color:#D2CFEB;
}
.self-introduction .info-txt::before{
    border-color:rgba(126, 119, 182, 0);
    border-top-width:0;
    border-bottom-width:17px;
    border-left-width:38px;
    border-right-width:38px;
    margin-top:-15px;
    margin-right:0px;
    border-right-color:#7E77B6;
}
.self-introduction .info-txt p {
	font-size:2rem;
	color:var(--hotpink);
	line-height:1.2;
	font-weight:500;
}
dl.profile {
	display:flex;
	flex-wrap:wrap;
	font-size:20px;
	padding:30px 0 0;
}
dl.profile dt {
	width:30%;
	padding-left:20px;
	padding-right:20px;
}
dl.profile dd {
	width:70%;
	color:var(--pink);
	padding-left:20px;
	padding-right:20px;
}
dl.profile dd:not(:last-child) {
	margin-bottom:30px;
}
ul.post-list {
	display:grid;
	gap:1.7rem;
	grid-template-columns:1fr 1fr 1fr;
	padding-left:20px;
	padding-right:20px;
	margin:30px 0;
}
ul.post-list li .box {
	max-width:180px;
	margin:0 auto;
}
ul.post-list li .box img {
	width:100%;
	height:180px;
	line-height:0;
	object-fit:cover;
	border:solid 2px var(--purple);
	border-radius:6px;
	margin-bottom:6px;
}
ul.post-list li .box .txt {
	font-size:1.4rem;
	text-align:center;
	font-weight:500;
}
@media screen and (max-width:640px) {
.sub-img {
	padding-left:5%;
	padding-right:5%;
	margin:1rem auto;
}
.sub-img li {
	width:19.324vw;
	max-width:8rem;
	margin-right:3%;
}

.sub-img li img {
	width:19.324vw;
	max-width:100%;
	height:19.324vw;
	object-fit:cover;
	border-radius:50%;
}
p.name {
	font-size:2rem;
}
.entry-box {
	padding-left:5%;
	padding-right:5%;
}
.entry-box a {
	height:3rem;
	font-size:1.5rem;
	line-height:3rem;
}
.entry-box .txt {
	width:30rem;
	font-size:1.2rem;
	margin:0.75rem auto 0;
}

main h3.tab {
	position:relative;
	background:var(--purple);
	height:5rem;
	line-height:5rem;
	padding-left:5%;
	padding-right:5%;
	margin-top:2rem;
}
main h3.tab::before {
	left:5%;
	width:3.4rem;
	height:3rem;
	transform:translateY(-50%);
}
main h3.tab span {
	font-size:2rem;
	margin-left:4rem;
}
.self-introduction {
	display:flex;
	padding-top:2rem;
	padding-left:5%;
	padding-right:5%;
}
.self-introduction .info-img {
	width:19.324vw;
}
.self-introduction .info-img img {
	width:19.324vw;
	height:19.324vw;
}
.self-introduction .info-txt {
	position:relative;
	width:calc(100% - (19.324vw + 9.662vw));
	padding:1.8rem 1.2rem;
}
.self-introduction .info-txt::after,.self-introduction .info-txt::before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    right:100%;
    top:24%;
}
.self-introduction .info-txt::after{
    border-color:rgba(210, 207, 235, 0);
    border-top-width:0;
    border-bottom-width:14px;
    border-left-width:33px;
    border-right-width:33px;
    margin-top:-14px;
    border-right-color:#D2CFEB;
}
.self-introduction .info-txt::before{
    border-color:rgba(126, 119, 182, 0);
    border-top-width:0;
    border-bottom-width:17px;
    border-left-width:38px;
    border-right-width:38px;
    margin-top:-15px;
    margin-right:0px;
    border-right-color:#7E77B6;
}
.self-introduction .info-txt p {
	font-size:1.4rem;
	line-height:1.4;
}
dl.profile {
	display:flex;
	flex-wrap:wrap;
	font-size:1.4rem;
	padding:2rem 0 0;
}
dl.profile dt {
	width:38%;
	padding-left:5%;
	padding-right:0;
}
dl.profile dd {
	width:62%;
	padding-left:0;
	padding-right:5%;
}
ul.post-list {
	gap:1.5rem;
	padding-left:5%;
	padding-right:5%;
	margin:2rem 0;
}
ul.post-list li .box {
	max-width:27.536vw;
}
ul.post-list li .box img {
	width:100%;
	height:27.536vw;
	margin-bottom:0.8rem;
}
ul.post-list li .box .txt {
	font-size:0.8rem;
	text-align:center;
	font-weight:500;
}
}
/*================================================
 *  フッター
 ================================================*/
footer {
	margin-top:50px;
}
ul.f-nav {
	margin-bottom:20px;
}
ul.f-nav li {
	margin-bottom:4px;
}
ul.f-nav li a {
	display:block;
	background:var(--purple);
	height:60px;
	font-size:20px;
	line-height:60px;
	color:var(--white);
	padding-left:50px;
	padding-right:50px;
	font-weight:400;
}
footer p.copy {
	font-size:1.2rem;
	text-align:center;
}
@media screen and (max-width:640px) {
footer {
	margin-top:5rem;
}
ul.f-nav {
	margin-bottom:2rem;
}
ul.f-nav li a {
	height:5rem;
	font-size:1.4rem;
	line-height:5rem;
	padding-left:5%;
	padding-right:5%;
}
footer p.copy {
	font-size:1.1rem;
}
}