@charset "utf-8";
/* 初期設定 */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
:root {
 --color-txtlink: #2817e7;
 --color-white1: hsl(0, 0%, 100%);
 --color-black: hsl(0, 0%, 0%);
 --color-gray1: hsl(0, 0%, 93%);
 --color-gray2: hsl(0, 0%, 80%);
 --color-gray3: hsl(0, 0%, 60%);
 --color-blue1: hsl(200, 85%, 60%);
 --color-blue2: hsl(214, 79%, 60%);
 --color-blue3: hsl(214, 79%, 40%);
 --color-orange1: hsl(35, 100%, 50%);
 --color-orange2: hsl(35, 100%, 60%);
 --color-lblue1: hsl(201, 100%, 96%);
 --color-lblue2: hsl(201, 100%, 80%);
 --color-liberty1: hsl(169, 100%, 97%);
 --color-liberty2: hsl(169, 47%, 65%);
 --color-liberty3: hsl(169, 65%, 37%);
 --color-event0: hsl(205, 100%, 33%);
 --color-event1: hsl(212, 47%, 49%);
 --color-event2: hsl(228, 56%, 98%);
 --color-event3: hsl(358, 67%, 41%);
 --color-event4: hsl(55, 100%, 95%);
}
html {
 scroll-behavior: auto;
}
body {
 color: #000000;
 font-family: 'Noto Sans JP', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
 line-height: 1.6;
 letter-spacing: 0.8px;
 margin: 0;
 text-align: left;
 font-weight: 400;
 font-feature-settings: "palt";
 background-color: #fff;
 height: 100%;
 padding-top: 0px;
}
a {
 color: var(--color-txtlink);
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
 transition: all 0.3s ease;
}
.notes-event {
	text-align: center;
	color: #fff;
}
@media screen and (max-width:768px) {
.notes-event {
	text-align: left;
}
}
img {
 vertical-align: bottom;
 width: 100%;
 height: auto;
}
.l-header {
 position: relative;
}
.l-wrapper {
 position: sticky;
 top: 0;
 z-index: 100;
}
.title-event {
 /*	position: absolute;
	top: 1.5rem!important;
	left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);*/
 margin-top: -20px !important;
}
.title-event img {
 width: 70% !important;
 height: auto !important;
 margin: 0 auto !important;
}
@media screen and (max-width:768px) {
 .title-event {
  margin-top: -30px !important;
 }
 .title-event img {
  width: 90% !important;
 }
}

h2 {
 font-size: 1.6em;
 margin: 0;
margin-bottom: 10px;
 line-height: 1.2;
 font-weight: 500;
 word-break: keep-all;
 overflow-wrap: break-word;
}
h3 {
 font-weight: 600;
 margin-bottom: .5em;
	background: #fff;
}
h4 {
 border: none;
 font-weight: 500;
}
.notes {
 font-size: .9em;
 line-height: 1.3;
 margin: 0;
 color: var(--color-black);
}
main {
 margin-inline: auto;
 padding: 0;
}
section > div {
 padding: 1em;
 max-width: 1000px;
 margin-inline: auto;
}
section.title {
 background-image: url("../image/background-img_2024autumn2.png");
 background-size: cover;
 display: flex;
 /* color: var(--color-white1);*/
 position: relative;
 border-top: 20px solid #911a67;
 border-bottom: 1px solid #ededed;
}
section.title::before, section.title::after {
 content: "";
 position: absolute;
 top: 0;
 height: 100%;
 width: 30%;
}
section.title::before {
 /* background: url(../image/background-gradl.png);*/
 background-position: 100% 0;
 background-size: cover;
 left: 0;
}
section.title::after {
 /* background: url(../image/background-gradr.png);*/
 background-size: cover;
 right: 0;
}
section.title img {
 /* filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, .5));*/
}
section.title .txt > div:first-of-type {
 max-width: 1000px;
}
section.title .txt > div:last-of-type {
 text-align: center;
 position: relative;
 max-width: 390px;
 margin-inline: auto;
 font-size: 1.2em;
 font-weight: bold;
 line-height: 1.2;
 width: 85%;
}
section.title .txt2 {
 display: flex;
 align-items: center !important;
 width: 100%;
}
section.title .txt2 div:first-child {
 width: 15% !important;
}
section.title .txt2 div:first-child img {
 width: 70% !important;
 height: auto !important;
 margin: 0 auto !important;
}
section.title .txt2 div:last-child {
 width: 85% !important;
}
section.title .txt3 {
 display: block !important;
 width: 100%;
 margin-bottom: 30px;
 margin-top: -30px;
 line-height: 1.8em;
 font-size: 1.12em;
}
section.beginning-box > .topbox {
 max-width: 100%;
 & > div:first-of-type {
  padding-bottom: .5em;
  & img {
   max-width: 750px;
  }
 }
 & > div:last-of-type {
  background: #885796;
  padding: .5em;
  & img {
   max-width: 600px;
  }
 }
}
@media screen and (max-width:1000px) {
 section.title .txt3 {
  width: 95%;
  margin: 0 auto;
  font-size: 1.0em;
 }
}
orm: translateX(-50%);
}
*/ section.title h1 {
 margin: 1.5em 0;
 padding: 0;
 max-width: 1000px;
}
section.title > div figure {
 max-width: 100px;
 width: 30%;
 min-width: 60px;
 margin-top: -6em;
}
.ontimebox {
 background: var(--color-lblue1);
 padding: .5em;
 border-radius: 10px;
}
.ontimebox h3 {
 color: var(--color-event3);
 font-weight: 800;
 font-size: clamp(1.2em, 2.8vw, 1.8em);
 text-align: center;
 word-break: keep-all;
 overflow-wrap: anywhere;
}
.ontimebox .list {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 10px;
}
.ontimebox .notes {
 margin-top: .5em;
}
section.event-details {
 padding: 1em 0;
}
section.event-details > div {
 padding: .5em;
}
section.event-details > div > div {
 padding: 1em 0;
}
/*section.event-details h2 {
 background: var(--color-event1);
 color: var(--color-white1);
 line-height: 1.8;
 margin: 0;
 padding: 0;
 font-size: 1.4em;
 font-weight: 700;
}*/
section.event-details > div > h2 {
 border-bottom: 4px solid #911a67;
 color: #911a67;
 line-height: 1.8;
 margin: 0;
 padding: 0;
 font-size: 1.8em;
 font-weight: 800;
 text-align: left;
}
section.event-details > div > div > h3 {
 border: 1px solid #911a67;
 ;
 display: flex;
 color: #911a67;
 ;
 font-weight: 800;
 line-height: 1.3;
 margin: 0;
}
section.event-details > div > div > h3:not(:first-of-type) {
 margin-top: 1em;
}
section.event-details > div h3 > span {
 word-break: keep-all;
 overflow-wrap: break-word;
 padding: .5em;
}
section.event-details > div h3 > div {
 background: #911a67;
 ;
 color: var(--color-white1);
 clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
 display: grid;
 place-content: center;
 padding: 0 1em 0 .5em;
 white-space: nowrap;
}
section.event-details > div > div > p {
 margin-top: .5em;
}
section.beginning-box {
 /* background: var(--color-event2);*/
}
section.beginning-box > div {
 max-width: 1000px;
 margin-inline: auto;
}
section.beginning-box > div > h2 {
 color: #ffffff;
 background-color: #0f9089;
 font-weight: 600;
	border-radius: 5px 5px 0 0;
 font-size: clamp(1.0em, 5.0vw, 1.2em);
 padding: 20px 0;
}
section.beginning-box > div > h2 > span {
 text-decoration-line: underline;
 text-decoration-thickness: 2px;
 text-underline-offset: 2px;
}
section.ontime {
 background: var(--color-event4);
 border-radius: 10px;
 filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
 margin: .5em 0;
}
section.ontime > div {
 padding: .5em;
}
section.ontime > div > h2 {
 font-weight: 800;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--color-event0);
 flex-direction: column;
 line-height: 1.3;
 font-size: clamp(1.2em, 5vw, 2.2em);
 background: transparent;
}
section.ontime > div > h2 > div {
 display: flex;
 align-items: center;
}
section.ontime > div > h2 .new_dev {
 color: var(--color-white1);
 font-size: .5em;
 display: block;
 padding: .3em .6em;
 margin-right: .1em;
 clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
 background: linear-gradient(#e83828 50%, #e84f31 50%, #e84f31 100%);
 background-size: 100% 3px;
}
section.ontime .mv-box {
 margin-bottom: 1em;
}
h2 .sub {
 font-size: .6em;
}
.btn-movie a {
 background: var(--color-event0);
 color: var(--color-white1);
 line-height: 1.3;
 display: block;
 max-width: 560px;
 margin-inline: auto;
 margin-bottom: 1em;
 border-radius: 50px;
 padding: .7em 1em;
 word-break: keep-all;
 overflow-wrap: break-word;
 width: 100%;
 text-align: center;
}
.btn-movie a:hover {
 text-decoration: none;
}
.mv-box {
 margin-bottom: 1em;
 max-width: 800px;
 margin-inline: auto;
 position: relative;
}
.mv-box::before {
 content: "※スピーカーを「ON」にしてご覧ください。";
 position: absolute;
 top: 10px;
 right: 10px;
 z-index: 2;
 background: var(--color-liberty3);
 color: var(--color-white1);
 padding: 0 .5em 2px;
 border-radius: 5px;
 font-size: .8em;
 white-space: nowrap;
 opacity: 1;
 transition: all 0.5s ease;
}
.mv-box:has(.vjs-has-started)::before {
 opacity: 0;
 transition: all 0.5s ease;
}
.mv-box:has(.vjs-paused)::before {
 opacity: 1;
 transition: all 0.5s ease;
}
.mv-box > .player-container2 {
 border: 2px solid var(--color-gray2);
 background-image: url("../image/img-ontime-mv.jpg") !important;
 background-size: contain;
}
section.evt-order {
/* background: #c8dff4;*/
 background-color: #0f9089;
 overflow: hidden;
 padding: 0 0 2em;
}
section.evt-order > div {
 max-width: 1000px;
 margin-inline: auto;
}
/*.btn-entry {
 margin: 2em auto!important;
 margin-inline: auto;
 max-width: 650px !important;
}*/
.btn-entry a{
	  position: relative;
  padding-left: 40px; /* アイコンのスペースを確保 */
	margin: 20px 0;
  display: inline-block;
  padding: 20px 0;
	  width: 500px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #ff9a3c, #ff5e2c);
    box-shadow: 0 6px 16px rgba(0,0,0,0.58);
  transition: all 0.3s ease;
font-size: clamp(1.2rem, 2.5vw, 2.0rem)!important;
  font-weight: 700;
  letter-spacing: 0.05em;
	border: 3px solid #fff;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); /* より目立つ影 */
}
/* 白丸の中に緑の右向き三角 */
.btn-entry a::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: #fff; /* 白丸背景 */
  border-radius: 50%;
  box-sizing: border-box;
}

/* 三角を白丸の中に描く */
.btn-entry a::after {
  content: "";
  position: absolute;
  left: 34px; /* 左端からの位置（白丸の中心に調整） */
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #ff9a3c; /* 緑の右向き三角 */
}




.btn-entry a:hover{
/*  background: linear-gradient(135deg, #d97f2a, #c8431e);*/
  transform: translateY(-2px);
	opacity: 1;
}
@media screen and (max-width:1000px) {
.btn-entry a{
	  width: 80%;
font-size: clamp(1.5rem, 2.5vw, 2.0rem)!important;
	  padding: 10px 0;
}
/* 白丸の中に緑の右向き三角 */
.btn-entry a::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: #fff; /* 白丸背景 */
  border-radius: 50%;
  box-sizing: border-box;
}
.btn-entry a::after {
  content: "";
  position: absolute;
  left: 18px; /* 左端からの位置（白丸の中心に調整） */
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #ff9a3c; /* 緑の右向き三角 */
}
}
/*.btn-entry a {
 background-color: #0066cc;
 text-align: center;
 font-size: 1.2em;
 font-weight: bold;
 border-radius: 30px;
 background-image: linear-gradient(180deg, rgb(22, 163, 219) 0%, rgb(8, 128, 194) 100%);
 color: var(--color-white1);
 display: flex;
 justify-content: center;
 line-height: 3.5;
 text-shadow: 1px 1px 3px hsla(0, 0%, 0%, .6);
}
.btn-entry a:hover {
 text-decoration: none;
 opacity: .8;
}*/
.mv-thumbnail {
 max-width: 600px;
 margin: auto;
 margin-bottom: 2em;
 position: relative;
 border: 2px solid var(--color-gray2);
}
.mv-thumbnail a div {
 background: var(--color-event0);
 color: var(--color-white1);
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 padding: .5em 1em;
 border-radius: 50px;
}
.mv-thumbnail a:hover {
 opacity: 1;
}
.mv-thumbnail a::before {
 content: "";
 background: rgba(43, 51, 63, .7);
 width: 70px;
 height: 70px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 border-radius: 100px;
 transition: all 0.5s ease;
}
.mv-thumbnail a::after {
 content: "";
 background: hsla(0, 0%, 100%, 1);
 width: 23px;
 height: 30px;
 position: absolute;
 top: 50%;
 left: 50.4%;
 transform: translate(-50%, -50%);
 clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.mv-thumbnail a:hover::before {
 opacity: .8;
}
.speech-bubble {
 background: var(--color-event0);
 color: var(--color-white1);
 padding: .5em 1em .6em;
 border-radius: 50px;
 word-break: keep-all;
 overflow-wrap: anywhere;
 text-align: center;
 max-width: 320px;
 position: relative;
 margin: 0 auto 1em;
 line-height: 1.2;
 font-size: .9em;
 width: fit-content;
}
.speech-bubble::before {
 content: "";
 background: var(--color-event0);
 width: 23px;
 height: 18px;
 position: absolute;
 bottom: -16px;
 left: 50.4%;
 transform: translateX(-50%);
 clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.allfadein {
 animation-name: fadeIn;
 animation-duration: 1.0s;
 animation-fill-mode: forwards;
 animation-timing-function: ease-in;
}
@keyframes fadeIn {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
.box-flex {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 10px;
 background: var(--color-gray1);
 padding: .6em;
 border-radius: 5px;
 margin-top: .5em;
}
.box-flex > li {
 display: flex;
 background: var(--color-white1);
 border-radius: 5px;
 padding: .5em;
 font-size: .9em;
 line-height: 1.3;
 gap: 1em;
 align-items: center;
}
.box-flex > li .box-img {
 width: 60px;
 background: var(--color-gray1);
 border-radius: 100px;
}
.box-flex > li > div:last-child {
 flex: 1;
}
.pdem {
 padding: .3em;
}
section > .top-box {
 max-width: 100%;
 padding: 40px 0 0px 0;
/* background-color: #0f9089;*/
    background: linear-gradient(90deg, #1d6f68, #2aa59d);
 overflow: hidden;
	background-image: url("../image/back-202604.png");
  background-size: cover!important;
  background-position: bottom center;
  background-repeat: no-repeat;
    position: relative;
	    box-shadow: inset 0 2px 4px rgba(0,0,0,0.25), inset 0 -2px 9px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.25);
/*    border-top: 3px solid #1d6f68;*/
    border-bottom: 5px solid #fff;
}
.zu-8500{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 必要なら */
}

.zu-8500 img{
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 70%;
}
@media screen and (max-width:960px) {
	.zu-8500{
		display: none;
}
}
/*section > .top-box::before {
    content: "";
    position: absolute;
    top: -10%;
    left: 28%;
    width: 20px;
    height: 160%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(-20deg);
    z-index: 0;
    filter: blur(10px);
}
section > .top-box::after {
    content: "";
    position: absolute;
    top: -10%;
    left: 28%;
    width: 60px;
    height: 160%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(-20deg);
    filter: blur(25px);
    opacity: 0.8;
    z-index: 0;
}*/



.top-box .logo {
 width: fit-content;
 margin: 0 auto;
 padding: .5em;
 & img {
  max-width: 850px;
 }
}
.top-box .logo > span {
 display: grid;
 background: #f00;
 color: #fff;
 border-radius: 50px;
 font-weight: bold;
 line-height: 1;
 padding: 5px .8em 7px;
 width: fit-content;
 margin: 0 auto 0;
 white-space: nowrap;
 font-size: clamp(.8em, 3.0vw, 1em);
}

.head-inner {
	width: 1000px;
	margin: 0 auto;
}
@media screen and (max-width:1000px) {
.head-inner {
	width: 100%;
}
}
.subcatch {
/*    color: #fff;*/
    font-size: clamp(16px, 2.5vw, 26px);
	text-align: center;
    font-weight: 700;
    margin-bottom: 0px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.maincatch {
/*    color: #fff;*/
	position: inherit!important;
		text-align: center;
    font-size: clamp(20px, 6vw, 3.2em);
    font-weight: 1000;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
    margin-bottom: 5px;
	margin-top: 0!important;
}
@media screen and (max-width:1000px) {
.subcatch {
/*	text-align: left;*/
/*	padding-left: 10px;*/
	    font-size: clamp(14px, 2.0vw, 26px);
}
	.maincatch {
/*	text-align: left;*/
/*	padding-left: 10px;*/
	    font-size: clamp(24px, 5vw, 2.5em);
	}
}
.event-badge {
		text-align: center;
	margin: 0 auto;
	width: 45%;
/*    display: inline-block;*/
    background: #fff;
    color: #444;
    padding: 5px 20px;
    border-radius: 30px;
    font-weight: 700;
    font-size: clamp(12px, 2vw, 20px);
/*    box-shadow: 0 6px 16px rgba(0,0,0,0.18);*/
	border: 1px solid #666;
}
@media screen and (max-width:1000px) {
.event-badge {
	width: 80%;
	    padding: 5px 20px;
}
}


.top-box > .txt {
 position: relative;
 width: fit-content;
 margin: 0 auto;
 padding: .5em;
}
.top-box > .txt img {
 max-width: 600px;
 z-index: 0;
 position: relative;
 /*
 margin: 0 auto;
*/
}
.top-box > .txt > span, .top-box .place > span {
 position: absolute;
 display: block;
 width: 3000px;
 background: #8a5897;
 height: 100%;
 bottom: 0;
 left: -4em;
 overflow: hidden;
 clip-path: polygon(2% 0, 100% 0, 100% 100%, 0 100%);
 z-index: 1;
}
.top-box > .txt > span.obi2 {
 left: -5em;
 z-index: 0;
 background-image: linear-gradient(360deg, rgba(193, 169, 201, 1) 10%, rgba(148, 103, 159, 1) 80%, rgba(193, 169, 201, 1) 100%);
}
.top-box .placelogo {
 width: fit-content;
 margin: 0 auto;
}
.top-box .place {
 position: relative;
 width: fit-content;
 padding: .5em;
 padding-right: 1.5em;
 margin: 0 auto;
}
.top-box .place > span {
 left: auto;
 right: 0;
 clip-path: polygon(0 0, 100% 0, 99.2% 100%, 0 100%);
}
.top-box .place img {
 z-index: 0;
 align-items: center;
 position: relative;
 max-width: 600px;
 /*width: clamp(200px, 50.0vw, 400px);*/
}
.top-box .place > span.obi2 {
 right: -.5em;
 z-index: 2;
 background-image: linear-gradient(360deg, rgba(193, 169, 201, 1) 10%, rgba(148, 103, 159, 1) 80%, rgba(193, 169, 201, 1) 100%);
}
ul.plus-ul > li {
 position: relative;
 letter-spacing: .2px;
}
ul.plus-ul > li::before {
 content: "";
 position: absolute;
 width: 1em;
 aspect-ratio: 1;
 background: #0f9089;
 border-radius: 10px;
 top: 7px;
 left: -1.5em;
}
ul.plus-ul {
 width: fit-content;
 font-size: clamp(0.9em, 2.0vw, 1.2em);
 margin-top: 0.5em;
 margin-left: 1.5em;
}
.img-box {
 max-width: 820px;
 margin: 2em auto;
 display: grid;
 gap: 2em;
}
ul.plus-ul span[class^="mark-"] {
 display: inline-block;
 font-size: 1em;
 color: #FFFFFF;
 padding: 0 10px 2px;
 margin: 0 2px;
 border-radius: 4px;
 font-size: 0.9em;
}
.mark-ocr {
 background-color: #8b5896;
}
.mark-api {
 background-color: #b2a747;
}
.mark-csv {
 background-color: #568f72;
}
.kakomi {
 border: 1px solid;
 border-radius: 10px;
 background-color: #ffffff;
}
.kakomi2 {
/* border: 1px solid #0F9089;
 border-radius: 5px;*/
/* background-color: #ededed;*/
}
.division2 {
 display: flex;
 justify-content: center;
}
.division2 > div {
	flex: 1;
}
.division3 {
 display: block;
}
.division3 p {
 margin: 5px;
	color: #0f9089;
}
.merit-box {
 background-color: #e2f2f2;
 padding: 0.7em;
 width: 50%;
	border-radius: 0 0 0 5px;
}
.merit-box_c {
 background-color: #CEDEF3;
 padding: 0.7em;
 width: 50%;
		border-radius: 0 0 5px 0;
}
p.merit {
 border: 2px solid #0f9089;
 border-radius: 1.50em;
 background-color: #fff;
 padding: 0px 15px;
 width: 80%;
 font-size: clamp(0.8em, 2.0vw, 1.0em);
 font-weight: 500;
 color: #0f9089;
 text-align: center;
	margin: 0 auto;
	margin-top: 20px;
}
p.merit_c {
 border: 2px solid #036eb8;
 border-radius: 1.50em;
 background-color: #fff;
 padding: 0px 15px;
 width: 80%;
 font-size: clamp(0.8em, 2.0vw, 1.0em);
 font-weight: 500;
 color: #036eb8;
 text-align: center;
		margin: 0 auto;
		margin-top: 20px;
}



.staff-grid{
  display:grid;
  grid-template-columns:100px 1fr; /* 左を細く */
  gap:10px;
  align-items:center;
}

.counsellor-grid{
  display:grid;
  grid-template-columns:1fr 100px;
  gap:10px;
  align-items:center;
}

.staff-img img,
.counsellor-img img{
  width:120px;
  height:auto;
  display:block;
  margin:0 auto;
}

.staff-list ul,
.counsellor-list ul{
  margin:0;
  padding-left:20px;
}
.counsellor-list{
  order:1;
}

.counsellor-img{
  order:2;
}

/* スマホ */

@media screen and (max-width:768px){

  .staff-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .staff-list ul,
  .counsellor-list ul{
    text-align:left;
  }

	
  .counsellor-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .counsellor-img{
    order:1;
    margin-bottom:10px;
  }

  .counsellor-list{
    order:2;
  }	
	
}



ul.staff {
  list-style: none;      /* デフォルトの黒丸を消す */
  padding-left: 0;
	margin: 20px 10px;
}

ul.staff li {
  position: relative;
  padding-left: 25px;
  margin: 5px 0;
}

ul.staff li::before {
  content: "✔";
  position: absolute;
  left: 0;
	top: -6px;
  color: #0F9089;
  font-size: 24px;
  font-weight: 900;
}

ul.counsellor {
  list-style: none;      /* デフォルトの黒丸を消す */
  padding-left: 0;
	margin: 20px 10px;
}

ul.counsellor li {
  position: relative;
  padding-left: 25px;
  margin: 5px 0;
}

ul.counsellor li::before {
  content: "✔";
  position: absolute;
  left: 0;
		top: -6px;
  color: #397DD7;
  font-size: 24px;
  font-weight: 900;
}

/*ul.staff > li {
 position: relative;
 margin-left: 1.5em;
 font-size: clamp(0.8em, 2.0vw, 1.0em);
}
ul.staff > li::before {
 content: "";
 position: absolute;
 width: 1em;
 aspect-ratio: 1;
 background: #0f9089;
 top: 6px;
 left: -1.2em;
}
ul.staff {
 width: fit-content;
 margin-top: 0.5em;
}*/
/*ul.counsellor > li {
 position: relative;
 margin-left: 1.5em;
 font-size: clamp(0.8em, 2.0vw, 1.0em);
}
ul.counsellor > li::before {
 content: "";
 position: absolute;
 width: 1em;
 aspect-ratio: 1;
 background: #036eb8;
 top: 6px;
 left: -1.2em;
}
ul.counsellor {
 width: fit-content;
 margin-top: 0.5em;
}*/

.icon-human {
	text-align: center;
	margin-bottom: 10px;
}
.icon-human img {
	width: 30%;
	height: auto;
	display: inline-block;
}
.arrow2 {
	text-align: center;
}
.arrow2 img {
 max-height: 2.0em;
 width: auto;
 margin: 0 auto;
 align-items: center;
}
.txt_b span {
 text-decoration-line: underline;
 font-size: 1.2em;
 font-weight: bold;
}
.txt_b {
/* display: flex;*/
	text-align: center;
 font-size: clamp(0.8em, 2.0vw, 1.0em);
}
.txt_b img {
 max-width: 120px;
 margin-right: 10px;
}
p.sub-txt1 {
 text-align: center;
 font-size: clamp(0.9em, 2.0vw, 1.3em);
 font-weight: bold;
 padding: 0.5em;
}
p.sub-txt2 {
 text-align: center;
 font-size: clamp(1.0em, 2.0vw, 2.0em);
 font-weight: bold;
 padding-top: 1.5em;
 padding-right: 1em;
 padding-left: 1em;
 padding-bottom: .1em;
 color: #0f9089;
}
p.sub-txt3 {
 text-align: center;
 font-size: clamp(1.0em, 2.0vw, 1.6em);
 font-weight: bold;
 margin: 1.5em;
}
.decorative-line {
 position: relative;
 width: auto;
	color: #ed6d46;
 height: 3px;
 margin-bottom: 1em;
 /*
 background: linear-gradient(to right, transparent 0%, #ed6d46 15%, #ed6d46 85%, transparent 100%);
*/
}
.decorative-line::before, .decorative-line::after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 height: 3px;
 background: linear-gradient(to right, transparent 0%, #ed6d46 15%, #ed6d46 85%, transparent 100%);
}
.decorative-line::before {
 top: -10px;
}
.decorative-line::after {
 bottom: -60px;
}
.feature p {
 border: 3px solid #0f9089;
 border-radius: 0.5em;
 background-color: #f9fae2;
 padding: 0px 15px;
 margin: 0 5px;
 font-size: clamp(0.8em, 2.0vw, 1.0em);
 font-weight: 500;
}
/*メディアクエリ*/
@media screen and (min-width:375px) {}
@media screen and (min-width:480px) {
 section.title::before, section.title::after {
  width: 160px;
 }
 .speech-bubble {
  font-size: 1em;
  max-width: 365px;
 }
 .decorative-line::before {
  top: -10px;
 }
 .decorative-line::after {
  bottom: -50px;
 }
 .division3 {
  display: flex;
  justify-content: center;
 }
}
@media screen and (min-width:768px) {
 section.title > div {
  padding: .5em 0em;
 }
 .ontimebox {
  padding: 1em;
 }
 section.ontime > div {
  padding: 1em;
 }
 .speech-bubble {
  width: fit-content;
  max-width: inherit;
 }
 .top-box .logo {
  display: grid;
  align-items: center;
  width: fit-content;
  grid-template-columns: 1fr auto;
 }
 .top-box .logo > span {
  margin-left: -.5em;
  margin-top: 0;
 }
 ul.plus-ul {
  margin-left: 1.5em;
  /*
  margin: 0 auto;
*/
 }
 section.beginning-box > div > h2 > span {
  text-underline-offset: 7px;
 }
}
@media screen and (min-width:1024px) {
 .beginning-box h2 {
  font-size: 2.0em;
 }
 section.ontime > div > h2 {
  flex-direction: inherit;
 }
}