@charset "UTF-8";

#about .about_cont.about_cont_main h4 {position:relative;display:block;padding:0;font-size:1.7rem;font-weight:500;line-height:1.3;}
#about .about_cont.about_cont_main h4 .txt_sml {font-size: 1.2rem;}
#about .about_cont.about_cont_main h4:before {content:none;}

#why .kadai .grid div p.ttl {font-size:1.35rem;margin-left:0.2em;}

dl.ai-description {display:flex;flex-flow:column;gap:20px;}
dl.ai-description>*{display:flex;flex-flow:column;gap:10px;}
dl.ai-description dt{color:#ffffff;background:linear-gradient(to right, #3B82F6, #0EA5E9);font-weight:700;transform:skewX(-12deg);padding:4px;text-align:center;}
dl.ai-description dd{font-size:0.875rem;line-height:1.25rem;}

@media (min-width: 768px) {
	dl.ai-description>*{flex-flow:row;align-items:center;}
	dl.ai-description dt{width:200px;flex:none;}
}

article.writing{display:flex;flex-flow:column;gap:60px;margin-bottom:60px;}
article.writing .flx{display:flex;flex-flow:row;gap:20px;align-items:center;}
article.writing .tal{text-align:left;}
article.writing .tac{text-align:center;}
article.writing .tar{text-align:right;}
article.writing a{text-decoration:underline;}
article.writing a.button{background-color:#20b7b0;padding:10px 20px;color:#FFF;font-weight:bold;font-size:14px;border:2px solid #20b7b0;border-radius:9999px;text-decoration:none;display:inline-block;
	&:hover{background-color:#FFF;color:#20b7b0;}
}
article.writing a.button2{background-color:#FFF;padding:10px 20px;color:#20b7b0;font-weight:bold;font-size:14px;border:2px solid #20b7b0;border-radius:9999px;text-decoration:none;display:inline-block;
	&:hover{background-color:#20b7b0;color:#FFF;}
}

article.writing .head{background: linear-gradient(to right, #3B82F6, #0EA5E9);color:#FFF;padding:20px;}
article.writing .head .goback{display:flex;flex-flow:row;align-items:center;gap:10px;font-weight:bold;font-size:14px;}
article.writing .head .goback svg{transform: rotate(180deg);width:10px;}
article.writing .head h1{font-size:24px;margin:30px 0 20px;font-weight:bold;}

.toc{margin:0 20px;}
.toc .wrap{display:flex;flex-flow:column;background:linear-gradient(90deg, #deeefd 0%, #d7f8fe 100%);border-radius:0 2em 0 2em;padding:20px 30px;margin:0 auto;width:100%;max-width:800px;}
.toc-i{display:flex;flex-flow:row;justify-content:space-between;font-weight:bold;
	&::after{content:"▼";}
}
ul.toc-c{display:none;width:100%;border-left:2px solid var(--color-border);padding:var(--space-s) 0 var(--space-s) var(--space-s);flex-flow:column;margin-top:10px;}
ul.toc-c li{font-weight:400;margin-top:5px;font-size:12px;
	&:first-child{margin-top:0;}
}
ul.toc-c>li>ul{margin-left:10px;}
.toc-chk{visibility:hidden;pointer-events:none;opacity:0;position:fixed;top:0;left:0;}
.toc-chk:checked ~ ul.toc-c{display:flex;}
.toc-chk:checked ~ .toc-i::after{content:"▲";}

article.writing .body {margin:0 20px;line-height:1.8;font-size:14px;}
article.writing .body .wrap{display:flex;flex-flow:column;gap:30px;}

article.writing .body .bold{font-weight:bold;}

article.writing .body .ttl{margin-top:-60px;padding-top:60px;z-index:-1;position:relative;}
article.writing .body h2{font-size:18px !important;line-height:1.6 !important;font-weight:bold;color:#FFF;background:linear-gradient(to right, #3d78e8, #2392e1);transform:skewX(-12deg);padding:10px 20px;margin:0;
	&::after{content:none;}
}
article.writing .body h3{font-size:16px;font-weight:bold;color:#1E293B;padding:0 0 10px;margin:0;
	&::after{content:"";position:absolute;display:block;margin:0 auto;bottom:0;left:0;right:0;width:100%;height:0.2em;background:linear-gradient(to right, #3B82F6, #0EA5E9);transform:skewX(-12deg);}
}
article.writing .body h4,article.writing .body h5,article.writing .body h6{font-size:14px;font-weight:bold;color:#3d78e8;padding:0;margin:0;}
article.writing .body .texttext{display:flex;flex-flow:column;gap:10px;}
article.writing .body .phototext{display:flex;flex-flow:column;gap:20px;}
article.writing .body figure>img{margin:0 auto;}
article.writing .body figure>figcaption{text-align:center;color:#666;}

article.writing .body .tablewrap{width:100%;padding-bottom:5px;overflow-x:scroll;}
article.writing .body table{width:100%;border:2px solid #FFF;border-collapse:collapse;text-align:left;color:#1E293B;}
article.writing .body th{background-color:#c2e6fc;font-weight:bold;}
article.writing .body td{background-color:#dff4fb;font-weight:normal;}
article.writing .body th,td{padding:10px;vertical-align:middle;border:2px solid #FFF;}


@media (min-width: 768px) {
	article.writing .body .phototext{display:flex;flex-flow:row;gap:20px;}
	article.writing .body .phototext.leftphoto{flex-flow:row;}
	article.writing .body .phototext.rightphoto{flex-flow:row-reverse;}
	article.writing .body .phototext>*{width:50%;}
}