@charset "UTF-8";

@font-face {/*Regular*/
  font-display: swap;
  font-family: "BIZ UDGothic", sans-serif;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/BIZUDGothic-Regular.woff2") format("woff");
}
@font-face {/*Bold*/
  font-display: swap;
  font-family: "BIZ UDGothic", sans-serif;
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/BIZUDGothic-Bold.woff2") format("woff");
}

:root{
	--color-black:#251714;
	--color-white:#FFF;
	--color-light:#fafafa;
	--color-mid:grey;
	--color-red:#FF0000;
	--ratio:1.4;
	--s-5:clamp(0.33rem, 0.39rem + -0.29vw, 0.18rem);
	--s-4:clamp(0.41rem, 0.47rem + -0.31vw, 0.25rem);
	--s-3:clamp(0.51rem, 0.57rem + -0.31vw, 0.35rem);
	--s-2:clamp(0.64rem, 0.69rem + -0.27vw, 0.5rem);
	--s-1:clamp(0.8rem, 0.84rem + -0.18vw, 0.71rem);
	--s0:clamp(1rem, 1rem + 0vw, 1rem);
	--s1:clamp(1.25rem, 1.19rem + 0.32vw, 1.41rem);
	--s15:clamp(1.3rem, 1.20rem + 0.35vw, 1.35rem);
	--s2:clamp(1.56rem, 1.39rem + 0.85vw, 2rem);
	--s3:clamp(1.95rem, 1.61rem + 1.7vw, 2.83rem);
	--s4:clamp(2.44rem, 1.83rem + 3.04vw, 4rem);
	--s5:clamp(3.05rem, 2.04rem + 5.07vw, 5.65rem);

	--measure:65ch;
	--line-height:var(--ratio);
	--line-height-small:calc(0.8*var(--ratio));
	--border-thin:var(--s-5);
	--border-thick:var(--s-2);
	line-height:var(--ratio);
	font-size:1rem;
	/* font-size:calc(.333vw + 1em); */
	background-color:var(--color-white);
	color:var(--color-black);
	/* nav */
	--themecolor: #553968;

	--sidegap: clamp(16px, 24vw / 6, 24px);
	--easeOut: cubic-bezier(.3,1,.7,1);
	--easeInOut: cubic-bezier(.7,0,.3,1);
	--contentWidth: calc(800px + var(--sidegap) * 2);
}
* {margin: 0;padding: 0;box-sizing: border-box;}
html{overflow-y: scroll;overflow-x: hidden;scroll-behavior: smooth;}
body{overflow-x: hidden;-webkit-font-smoothing: antialiased;margin:0;padding:0;font-family: "BIZ UDGothic", sans-serif;font-weight: 400;font-style: normal;letter-spacing:1px;font-feature-settings:"palt";}
h1,h2,h3,h4,h5,h6{font-family: "BIZ UDGothic", sans-serif;font-weight: 700;font-style: normal;}
img {max-width: 100%;height: auto;}
h2{text-align:center;font-size:var(--s2);}
h3{text-align:center;font-size:var(--s1);}

/* ===FUNCTION=== */
.attention{font-size:var(--s-1);text-align:right;margin-top:var(--s-2);}
.text-center{text-align:center;}
.word-break{word-break:keep-all;}
   /* 別ウインドウ */
   .other::before{content:"";width: 20px;height: 20px;display:inline-block;margin-right:0.5rem;vertical-align:middle;
  mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23000000" d="M15.733,19.827H.992c-.452,0-.819-.366-.819-.819V4.267c0-.452.367-.819.819-.819h6.551c.452,0,.819.367.819.819s-.367.819-.819.819H1.811v13.103h13.103v-5.733c0-.453.366-.819.819-.819s.819.366.819.819v6.551c0,.453-.366.819-.819.819Z" /><path fill="%23000000" d="M19.008.173h-7.37c-.453,0-.819.367-.819.819s.366.819.819.819h5.394l-8.429,8.429c-.32.32-.32.838,0,1.158.16.16.369.24.579.24s.419-.08.579-.24L18.189,2.969v5.394c0,.452.366.819.819.819s.819-.367.819-.819V.992c0-.452-.366-.819-.819-.819Z" /></svg>') no-repeat center center;
}

/* ===HEADER=== */
header{text-align:center;
	background: linear-gradient(rgba(132, 98, 80, 0.7), rgba(213,197,181, 0.5)),url(../img/noise.png);
	background-size: cover,100%;
	background-repeat:no-repeat,repeat-y;
}
header h1{position:relative;z-index:2;text-align:center;padding:var(--s1);}
header h1 img{width:min(80%,590px);}
header .header-image{position:relative;margin-top:-3rem;z-index:0;padding-top:7.5rem;padding-bottom:7.5rem;mix-blend-mode:multiply;}
@media (40rem > width) {
  header .header-image{padding-top:2.5rem;padding-bottom:2.5rem;}
}
header .header-image img{position:relative;z-index:2;}
header .header-image::before{display:block;content:"";width:100%;height:100%;background:url(../img/header-image-bg-noise.webp) no-repeat;background-size:cover;background-position:center;position:absolute;top:0;left:0;z-index:0;}
header section{padding:var(--s2);max-width:50rem;margin-left:auto;margin-right:auto;}
header section:first-of-type{margin-top:var(--s1);}
header section h2{text-align:center;font-size:var(--s2);margin-bottom:2rem;padding:1rem 0 0.85rem;background-color:#5b4236;background-image:url(../img/noise-mono.png);background-blend-mode: soft-light;display:inline-block;margin-left:auto;margin-right:auto;border-radius:4rem;position:relative;width:min(100%, 50rem);}

header section h2 span{color:#FFF;}
header section p{font-weight:600;}
@media (40rem < width) {
  header section p{font-size:var(--s15);}
}
header section p:not(:first-of-type){margin-top:1rem; }
header section p .remark{display:block;font-size: var(--s-1);margin-top:0.5rem;}
header .header-bottom{background-color:#FFF;}
header .header-bottom img{opacity:0.75;object-fit:fill;width:100dvw;}

/* ===CONTENTS=== */
main.main{padding:var(--s1);min-height:100vh;display:flex;flex-direction:column;justify-content:center;box-sizing:content-box;scroll-behavior: smooth;}
main.main > *{margin-left:auto;margin-right:auto;box-sizing:border-box;}
main.main > h2{text-align:center;font-size:var(--s3);}
main.main > h2 + *{margin-top:var(--s2);}

main.main .main-header{text-align:center;padding:var(--s2);}
main.main .main-header img{text-align:center;width:min(100%,40rem);}

article section:not(.app-form-wrap){margin: var(--s4) 0 0;}
article > h2{color:#FFF;background-size:contain;background-position: center;background-repeat: no-repeat;width:100dvw;margin-left:calc(50% - 50dvw);margin-right:calc(50% - 50dvw);margin-bottom:var(--s3);}

	/* プログラムの構成　座学×実習 */
	#program-workshop{width:100%;max-width:58rem;}
	.introduction > div:not(.introduction-header){margin-top:var(--s4);}
	.introduction-header {display: grid;grid-template-columns: 4fr 1fr 4fr;grid-template-rows: 1fr;grid-column-gap: 0px;grid-row-gap: 0px;max-width:50rem;margin-left:auto;margin-right:auto;}
	.introduction-header div{text-align:center;}
	.introduction-header div h3{margin-bottom:var(--s-2);letter-spacing:var(--s-4);font-size:var(--s1);}
	.introduction-header div p{font-weight:700}
	.introduction-header-left,
	.introduction-header-right{color:#FFF;padding:var(--s1) 0.5rem;border-radius:6px;position:relative;}
	.introduction-header-left *,
	.introduction-header-right *{z-index:2;position:relative;}
	.introduction-header-left::before,
	.introduction-header-right::before{position: absolute;content:"";width:100%;height:100%;display:block;background:url(../img/noise-min.png);mix-blend-mode:multiply;top:0;left:0;z-index:0;border-radius:6px;opacity:0.5;}
	.introduction-header-left { grid-area: 1 / 1 / 2 / 2;
		background: linear-gradient(90deg, rgba(60, 177, 174, 1), rgba(0, 131, 134, 1));background-size: cover;}
	.introduction-header-right { grid-area: 1 / 3 / 2 / 4;
		background: linear-gradient(90deg, rgba(202, 159, 41, 1), rgba(176, 128, 0, 1));background-size: cover;}
	.introduction-header-center { grid-area: 1 / 2 / 2 / 3;display:flex;align-items:center;justify-content:center;padding:1rem;}
	.introduction-header-center img{max-width:1.5rem;}
	.introduction-subject{display:grid;grid-gap:var(--s1);font-weight:700;}
	.introduction-subject table{border:1px solid #000;border-collapse:collapse;}
	.introduction-subject table th,
	.introduction-subject table td{border:1px solid #000;padding:0.5rem var(--s1);word-break:keep-all;}
	.introduction-subject table thead td{background-color:#717071;letter-spacing:var(--s-3);color:#FFF;font-weight:700;}
	.introduction-subject table tbody tr td::first-letter{margin-right:0.2rem;}
	.introduction-subject table tbody tr:first-of-type td{background-color:#dcf4e2;}
	.introduction-subject table tbody tr:nth-of-type(2) td{background-color:#d4ecf4;}
	.introduction-subject table tbody tr:nth-of-type(3) td{background-color:#f4dfd7;}
	.introduction-subject table tbody tr:nth-of-type(4) td{background-color:#f7dae8;}
	.introduction-subject table tbody tr:nth-of-type(5) td{background-color:#f7f6e4;}
	.introduction-subject table tbody tr:last-of-type td{background-color:#e6e4f9;}
	.introduction-subject-detail{display:flex;flex-wrap:wrap;}
	.introduction-subject-detail > div{padding:var(--s-1);border-radius:6px;gap:1rem;}
	.subject-detail-head{background-color:#FFF;padding:0.5rem var(--s-1);font-size:1.1rem;letter-spacing: 0.2rem;}
	/* 科目 */
	.subject-detail-01{color:#378940;background-color:#dcf4e2;}
	.subject-detail-02{color:#45a0cd;background-color:#d4ecf4;}
	.subject-detail-03{color:#db7d4f;background-color:#f4dfd7;}
	.subject-detail-04{color:#d8609c;background-color:#f7dae8;}
	.subject-detail-05{color:#a19301;background-color:#f7f6e4;}
	.subject-detail-06{color:#9066a4;background-color:#ebe7ec;}
	.subject-detail-04::before{background-color:#e8569d;}
	.subject-detail-05::before{background-color:#a19301;}
	.subject-detail-06::before{background-color:#9066a4;}
	/* 受講形態・受講時間 */
	.spend-contents{display: grid;grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));grid-gap: var(--s-1);margin-top:var(--s1);}
	.spend-contents p{position:relative;border-radius:6px;padding:var(--s0);text-align:center;font-size:1.1rem;font-weight:700;background-image: linear-gradient(90deg, rgba(229, 229, 229, 1), rgba(152, 152, 152, 1));}
	.spend-contents p::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:6px;background-image:url(../img/noise-mono.png);mix-blend-mode:multiply;z-index:0;opacity:0.7;}
	.spend-contents p span{position:relative;}
	.spend-contents p span:nth-of-type(2){font-family:initial;}
	/* プログラムの具体例 */
	.concrete-contents{display: grid;grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));grid-gap: var(--s1);margin-top:var(--s1);text-align:center;}
	.concrete-contents img{border-radius:6px;}
	.concrete-contents .caption{display:block;}
	/* 参加者の声 */
	.voice-wrap,
	.message-wrap{display: grid;grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));grid-gap: var(--s4);margin-top:var(--s1);text-align:center;}
	.voice-content img,
	.message-content img{max-width:8rem;}
	.voice-name,
	.message-name{margin-top:var(--s0);margin-bottom:var(--s1);font-weight:700;}
  .voice-voice,
  .message-message{text-align:left;text-align:justify;}
	/* 資料 */
	.data{display:flex;gap:var(--s1);}
	.documents{display:flex;flex-direction:column;gap:var(--s1);}


	.documents p a{display:block;text-decoration:none;font-weight:700;background-color:#dbf4f1;border:3px solid #179992;border-radius:6px;color:#179992;font-size:var(--s1);text-align:center;width:100%;padding:var(--s0) 0;position:relative;transition:.3s;}
	.documents p a:hover{background-color:#c7e5e1;}
  .documents p a::before{background-color:#179992;}
	.documents p a::after{content:"";width:33px;height:33px;display:block;background:url(../img/arrow-r.svg) no-repeat;background-size: contain;position:absolute;right:0.5rem;top:50%;transform:translateY(-50%);}
	.documents.reverse p a{background-color:#179992;border:3px solid #179992;color:#FFF}
	.documents.reverse p a:hover{background-color:#c7e5e1;color:#179992;}
	.documents.reverse p a.other::before{background-color:#FFF;}
	.documents.reverse p a.other:hover::before{background-color:#179992;}

	.movie{width: 100%;aspect-ratio: 16 / 9;}
	.movie iframe{width: 100%;height: 100%;}

	/* 申込みフォーム */
  #app-form{width:100%;}
  #app-form .app-form-button{width:min(90%, 30rem);margin-left:auto;margin-right:auto;text-align:center;display:flex;gap:var(--s1);}
  #app-form .app-form-button a{display: block;text-decoration: none;font-weight: 700;background-color: #f4eeea;border: 3px solid #bcafa4;border-radius: 6px;color: #7f5f4f;font-size: var(--s1);text-align: center;width: 100%;padding: var(--s0) 2rem;position: relative;transition: .3s;}
  #app-form .app-form-button a:hover{background-color:#e2dad4;}
  #app-form .app-form-button a::after{content: "";width: 33px;height: 33px;display: block;background: url(../img/arrow-r-br.svg) no-repeat;background-size: contain;position: absolute;right: 0.5rem;top: 50%;transform: translateY(-50%);}
  #app-form .app-form-button a.other::before{background-color:#7f5f4f;}
  #app-form .app-form-button a small{display:block;margin-top:0.3rem;font-size:var(--s-1);}
  #app-form .app-form-wrap{width:min(100%,42rem);margin-left:auto;margin-right:auto;}

	/* FOOTER */
	footer{text-align:center;}
	.footer-copyright{padding:var(--s3);color:#FFF;text-align:center;text-shadow: 0 0 15px #a5a5a5;}
	.footer-copyright h4{margin-bottom:var(--s0);}
	p.footer-mailaddress a{max-width:15rem;display:block;margin:0 auto;}
	footer{text-align:center;
		background: linear-gradient(rgba(208,188,167, 0.5), rgba(68, 46, 31, 0.7)),url(../img/noise.png);
		background-size: cover,100%;
		background-repeat:no-repeat,repeat-y;
	}
	footer .footer-bottom{background-color:#FFF;}
	footer .footer-bottom img{object-fit:fill;vertical-align:bottom;width:100dvw;}
	footer .footer-contact{font-family:initial;margin-top:var(--s0);}
	footer .footer-contact small{display:block;}
	footer .footer-contact strong{font-size:var(--s1);}
	footer .footer-image img{width:min(80%,400px);margin-top:var(--s2);}

	/* ↑COMMON */

@media print, (981px < width) {
	.introduction-subject{grid-template-columns: 1fr 3fr;
		/* grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); */
	}
	.introduction-subject table{grid-area: 1 / 1 / 2 / 2;}
	.introduction-subject .introduction-subject-detail{grid-area: 1 / 2 / 2 / 3;width:100%;}
	.introduction-subject-detail > div{display:flex;flex-direction:row;align-items:center;writing-mode: vertical-rl;}
	.subject-detail-head{height:9rem;border-radius: 4px;}
	.subject-detail-04,
	.subject-detail-05,
	.subject-detail-06{margin-left:auto;position:relative;}
	.subject-detail-04::before,
	.subject-detail-05::before,
	.subject-detail-06::before{position:absolute;content:"";width:30px;height:50px;clip-path: polygon(0 0, 0% 100%, 40% 50%);top:50%;left:0;transform:translate(calc(-100% + 5px), -50%);}
	/* 受講形態・受講時間 */
  .spend-contents{margin-bottom:6rem;}
	.spend-contents p span.spend-contents-attention{position: absolute;text-align: center;top: calc(100% + 0.5rem);font-weight: 400;font-size: calc(var(--s-1) - .1rem);width: 100%;left: 0;right: 0;}

}
/* ↑ MIN 981 */

@media (980px > width) {
	.introduction-subject{flex-direction:column;}
	.introduction-subject table{flex-basis:100%;}
	.introduction-subject-detail{flex-direction:column;flex-basis:100%;}
	.introduction-subject-detail > div{text-align:center;}
	.subject-detail-head{margin-bottom:var(--s0);font-size:var(--s1);}
	.subject-detail-04,
	.subject-detail-05,
	.subject-detail-06{margin-top:var(--s3);position:relative;}
	.subject-detail-04::before,
	.subject-detail-05::before,
	.subject-detail-06::before{position:absolute;content:"";width:50px;height:30px;clip-path: polygon(0 0, 51% 29%, 100% 0);top:0;left:50%;transform:translate(-50%,calc(-50% - 5px));}
	/* 受講形態・受講時間 */
	.spend-contents p span.spend-contents-attention{font-size:calc(var(--s-1) - .1rem);display:block;margin-top:0.5rem;}
}
/*↑ MAX 980 */

@media print, (40.1rem < width) {
  article{margin-top:var(--s4);}
	article > h2{padding:calc(var(--s2) * 2) 0;}
	#program-workshop h2{background-image:url(../img/h2-bg-green.webp);display:flex;gap:1rem;align-items:center;justify-content:center;}
	#app-form h2{background-image:url(../img/h2-bg-brown.webp);display:flex;gap:1rem;align-items:center;justify-content:center;}
	/* 受講形態・受講時間 */
	.spend-contents p span{display:block;}
	/* 参加者の声 */
	.voice h3{background:url(../img/voice-titlebar-pc.webp) no-repeat center;background-size:100%;padding:3rem 0;color:#fff;}
	/* 講師からのメッセージ */
	.message h3{background:url(../img/message-titlebar-pc.webp) no-repeat center;background-size:100%;padding:3rem 0;color:#fff;}
	/* 資料 */
	/* .data > div{flex-basis:calc(50% - 1.5rem);} */
	.data > div{flex:1;}
	/* 固定ボタン */
	.float-button{position:fixed;right:var(--s0);z-index:10;opacity:0;transform: translateY(150px);}
	.float-button a{display:block;width:120px;height:120px;display:flex;justify-content:center;align-items:center;color:#FFF;background:url(../img/floatbutton-bg-pc.webp) no-repeat;background-size:contain;font-weight:700;text-decoration:none;transition:.3s;}
	.float-button a:hover{opacity:0.7;}
	.float-button.UpMove{animation: UpAnime 0.5s forwards;}
	.float-button.DownMove{animation: DownAnime 0.5s forwards;}
  .spObj{display:none;}
}
@keyframes UpAnime{
  from {opacity: 0;transform: translateY(150px);}
	to {opacity: 1;transform: translateY(-20px);}
}
@keyframes DownAnime{
	from {opacity: 1;transform: translateY(-20px);}
	to {opacity: 1;transform: translateY(150px);}
}
/* ↑ min 641 */

@media print, (40rem > width) {
  article{margin-top:var(--s1);}
	header section h2{font-size:var(--s1);width:100dvw;}
  header section:first-of-type h2{border-top-left-radius:0;border-bottom-left-radius:0;transform:translateX(-4rem);}
  header section:first-of-type h2 span{transform:translateX(2rem);display:block;}
  header section:last-of-type h2{border-top-right-radius:0;border-bottom-right-radius:0;}
  header section:last-of-type h2 span{transform:translateX(-1rem);display:block;}

	header section p br{display:none;}
	article > h2{padding:calc(var(--s2) * 3) 0;}
	#program-workshop h2{background-image:url(../img/h2-bg-green-sp.webp);}
	#program-workshop h2 span{display:block;}
	#app-form h2{background-image:url(../img/h2-bg-brown-sp.webp);}
	/* 参加者の声 */
	.voice h3{background:url(../img/voice-titlebar-sp.webp) no-repeat center;background-size:100%;padding:3.5rem 0;color:#fff;}
	/* 講師からのメッセージ */
	.message h3{background:url(../img/message-titlebar-sp.webp) no-repeat center;background-size:100%;padding:3.5rem 0;color:#fff;}
  /* 申込みフォーム */
  #app-form .app-form-button{flex-direction:column;}
	/* 資料 */
	.data{flex-direction:column;}
	/* 固定ボタン */
	.float-button{position:fixed;z-index:10;opacity:0;width:100dvw;
	}
	.float-button a{width:100dvw;height:70px;display:flex;justify-content:center;align-items:center;color:#FFF;background:url(../img/floatbutton-bg-sp.webp) no-repeat;background-size:100%;font-weight:700;text-decoration:none;transition:.3s;font-size:var(--s1);position:relative;padding-top:var(--s-3);}
	.float-button a::after{content:"";width:30px;height:30px;display:block;background:url(../img/arrow-r-red-sp.svg) no-repeat;background-size: contain;margin-left:1rem;}

	.float-button.UpMove{animation: UpAnimeSP 0.5s forwards;}
	.float-button.DownMove{animation: DownAnimeSP 0.5s forwards;}
  .pcObj{display: none;}
}
/* ↑Max 640 */
@keyframes UpAnimeSP{
  from {opacity: 0;transform: translateY(150px);}
	to {opacity: 1;transform: translateY(0);}
}
@keyframes DownAnimeSP{
	from {opacity: 1;transform: translateY(0);}
	to {opacity: 1;transform: translateY(150px);}

}


/* content */
.content-wrap{width:100%;max-width:58rem;/*（1200px）*/display: grid;/* grid-template-columns: repeat(auto-fit, minmax(22ch, 1fr)); 3カラム*/grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); /*4カラム*/	/* ※auto-fit＝横幅に入るだけ配置（隙間を自動的に埋める） */
grid-gap: var(--s1);border-width:var(--border-thin);border-color:var(--color-red);border-style:solid;padding:var(--s1);}
.content-box{word-break: break-all;padding: var(--s1);border: var(--border-thin) solid;display:flex;flex-direction:column;}
.content-box h2{background-color:#fff084;margin-top:0;padding:0.3rem 0.5rem;font-size:var(--s1);}
.content-box p{margin:0;font-size:var(--s0);}

@media (40rem > width) {/*640px未満*/
	.content-wrap{grid-template-columns:100%;}
}