/* *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;tab-size:2;scrollbar-gutter:stable}:where(html:has(dialog:modal[open])){overflow:clip}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(dialog){border:none;background:none;inset:unset;max-width:unset;max-height:unset}:where(dialog:not([open])){display:none!important}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important} */

@font-face {
  font-family: "Noto Sans JP";
  src:
    url("https://socionics.or.jp/fonts/NotoSansJP-VariableFont_wght.woff") format("woff"),
    url("https://socionics.or.jp/fonts/NotoSansJP-VariableFont_wght.ttf") format("ttf");
    font-weight: normal;
    font-display: swap;
}

@font-face {
  font-family: "Inter";
  src:
    url("https://socionics.or.jp/fonts/Inter-VariableFont_opsz_wght.woff") format("woff"),
    url("https://socionics.or.jp/fonts/Inter-VariableFont_opsz_wght.ttf") format("ttf");
    font-weight: normal;
    font-display: swap;
}

@font-face {
  font-family: "Shippori Mincho";
  src:
    url("https://socionics.or.jp/fonts/ShipporiMincho-Regular.woff") format("woff"),
    url("https://socionics.or.jp/fonts/ShipporiMincho-Regular.ttf") format("ttf");
    font-weight: normal;
    font-display: swap;
}

@font-face {
  font-family: "Josefin Sans";
  src:
    url("https://socionics.or.jp/fonts/JosefinSans-VariableFont_wght.woff") format("woff"),
    url("https://socionics.or.jp/fonts/JosefinSans-VariableFont_wght.ttf") format("ttf");
    font-weight: normal;
    font-display: swap;
}

:root{
  --header-h:110px;
}


html, body {
  overscroll-behavior: none; /* iOSのゴム引き防止 */
}
html, body {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP","Inter", sans-serif;
    font-weight: 350;
    font-feature-settings: "palt";
    word-spacing: 0;
    letter-spacing: 0;
    line-height: 1.5;
    color:#333;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.8em;
  background-color: #fff;
  width:100%;
  height:100%;
}
body{overflow-x:hidden;}

h1{
  font-size: 5em; /* 50px */
}


p.logo{
    padding:1rem 3.5rem;
    max-width:900px;
}
p.logo_menu{
    width: 100%;
    max-width:700px;
}
p.logo_loading{
    max-width:200px;
    margin:auto;
}
.logo_footer{
  display:flex;
  justify-content: center;
  align-items: center;
    justify-self: center;
}

img.socio_logo{
    width:100%;
    min-width:400px;
}
img.socio_logo_mini{
    width:100%;
}

img.socio_en_logo{
    width:80%;
    padding:1rem 3.5rem;
    max-width:300px;
}

section {
    text-align: center;
}
section.top{
  position: relative;
  margin-top:4rem;
}
section.menu{
  margin-top:4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.movie{
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}
video#movie2 {
	position: fixed;
	top: 50%;
	left: 50%;
	display: block;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
    z-index:-1;
    transition: opacity 0.5s ease-in-out;
}
.wrap {
    width:100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin: 5rem auto;
    margin-bottom: 40px;
    position: relative;
}
.wrap_comp {
    width:100%;
    z-index: 1;
    display: flex;
}

.info_box{
    width:100%;
    display: flex;
    flex-wrap:wrap;
    flex-direction: row;
    justify-content: left;
    align-items: start;
    padding: 3rem 0;
}
@media (max-width:768px){
  .info_box{
    flex-direction: column;
  }
}
.bold {
    font-weight: 600;
    font-size:1.2em;
}
.bold2 {
    font-weight: 600;
    font-size:1.1em;
}
h3 {
    padding:0px;
    margin:1rem 0rem;
    margin-top:2rem;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.5;
}
.bg-white {
    text-align: left;
    background: rgba(255, 255, 255, 1);
    color: #333;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.8;
    border-radius: 3rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 10px solid hsla(0,20%,100%,.5);
    background-clip: padding-box;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media (max-width:768px){
  .bg-white {
    box-shadow:none;
    border:none;
    border-radius:0;
  }

}

.bg-gray {
    text-align:left;
    background: rgb(66, 66, 66);
    color: #333;
    font-size: 1.8rem;
    line-height:1.8;
    border-radius: calc( 2.5rem + 1vh );
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 10px solid hsla(0,20%,100%,.5);
    background-clip: padding-box;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    color:#fff;
    width: calc( 50% + 14vh ); 
    padding: auto calc(2rem + 1vh);
    max-width: 800px;
}

.bg-white.top {
  width: 100%;
  max-width: 800px;
  padding: 2rem;
  position: relative;
  z-index: 3;
}
.bg-white.top2 {
  width: 100%;
  max-width: 1000px;
  padding: 2rem;
  position: relative;
  z-index: 3;
}


.bg-white.harf {
  width: auto;
  margin: 0;
  display: none;
}


.width700px{
    width:700px;
}
.widthtop{
    width:90%;
}

.bg-white.question {
    max-width: 1000px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    margin:0;
    /* padding: calc(2rem + 1vh); */
    padding:2rem;
}

.bg-white.question#typetest {
  height:3100px;
}
.bg-white.result {
  max-width: 1000px;
  background: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0;
}

.bg-white.signup {
    width:90%;
    max-width: calc(450px + 10vh); 
    background: rgba(255, 255, 255, 1);
}

span.long_type{
    font-size: 0.9em;
}


table{
  margin: auto;
  border-spacing: 0px;
}
table.sign_table{
  width:100%;
  max-width: 800px;
}
table.quest_table{
  width:100%;
  max-width: 800px;
  display: block;
}

[id^='qtable'] {
  position: absolute;
  top:0px;
  left:0px;
  z-index: -2;
}

div.q_wrap { 
  position: relative;
  width:100%;
}
.block{
  display: block;
  width:100%;
}
tr{ 
    padding:10px;
    width:100%;
    box-sizing: border-box;
}
a{
  text-decoration: none;
  color:#038a57;
}
/* a:hover{
  color:darkgreen;
} */
th{
    font-weight:600;
    margin:0px;
    padding:20px;
    text-align:center;
    border-bottom: dashed #ccc 1px;
}
td.border{
  font-weight:400;
  margin:0px;
  padding:20px;
  text-align:center;
  border-bottom: dashed #ccc 1px;
}
.eng{
  font-family: 'Inter';
  font-weight: 400;
  margin:1.5rem 0px;
}
.mini {
  font-size:0.7em;
}
.mini2 {
  font-size:0.9em;
}
.puti {
  font-size:0.5em;
}
.func_meter{
  font-size:1.5em;
}
.progress {
  font-family: 'Inter';
  font-size: 2em;
  font-weight:400;
  vertical-align:center;
}
tr.socion{
  border:1px solid #333;
  background-color: #333;
  color:white;
  text-align: center;
}
td{
    padding:0;
}
table.chara {
  border:none;
  padding:0;
  margin:0;
	border-spacing:0;
	margin-top: 5px;
	margin-bottom: 5px;
	border: none;
}
td.chara{
  color:white;
  text-align: center;
  margin: 0;
  padding: 0;
  border: 2px solid #333;
}
th.sign{
  font-size:calc(0.5em + 0.5vw);
  font-weight:700;
  width:50%;
  height: calc(3rem + 1vh);
  margin:auto;
  padding:calc(0.5rem + 0.2vh);
  border-bottom: dashed #ccc 1px;
  box-sizing: border-box;
}
 td.sign{
  font-size:calc(0.5em + 0.5vw);
  font-weight:500;
  width:50%;
  height: calc(3rem + 1vh);
  margin:auto;
  padding:calc(0.5rem + 0.2vh);
  border-bottom: dashed #ccc 1px;
  box-sizing: border-box;
}
.roleth {
  background-color: #333;
  color: white;
}
.mini_desc{
  font-weight:500;
  font-size:0.9em;
}
a.func {
  color:#000000;
  text-decoration: underline;
}
a.func:hover {
  color:#9a0000;
  text-decoration: underline;
}
td.chara img{
  margin:0;
  width:100%;
  max-width: 250px;
}
td[id^=result_top_title] {
  border: none;
  border-radius:1.8rem;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding:3rem 0;
  color:#fff;
  box-sizing: border-box;
}

.result_title {
  border: none;
  border-radius:3.5rem;
  font-size:1.2em;
  box-shadow: rgba(17, 17, 26, 0.1) 1px 1px 16px;
  box-sizing: border-box;
  padding:2rem;
  margin:0 1rem;
  background: #C9CCD3;
  background-image: linear-gradient(to left, #BDBBBE 0%, #9D9EA3 100%), radial-gradient(88% 271%, rgba(255, 255, 255, 0.25) 0%, rgba(254, 254, 254, 0.25) 1%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(50% 100%, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%);
  background-blend-mode: normal, lighten, soft-light;
  color:white;
}

/* ── Type Section Header (with face image) ── */
.type-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  margin: 0 0 2rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #0f2444 0%, #1a3c6e 60%, #2a5298 100%);
  box-shadow: 0 4px 20px rgba(15, 36, 68, 0.15);
}
.type-section-face {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.type-section-title {
  font-size: 1.15em;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
@media (max-width: 600px) {
  .type-section-header {
    padding: 16px 18px;
    gap: 12px;
  }
  .type-section-face {
    width: 44px;
    height: 44px;
  }
  .type-section-title {
    font-size: 1em;
  }
}
h6{
  display: inline;
  font-size:1em;
  font-weight: 600;
}
.q_text{
  color:#555;
  /* font-size:calc(1em + 0.5vh); */
  /* padding: calc(4.2rem + 0.8vh) 0; */
  padding-bottom:2rem;
  font-weight:500;
}

.q_progress{
  color:#555;
  font-size:1.2em;
  padding: calc(2rem + 1vh) 0;
  font-weight:500;
  border-bottom: 1px solid #ccc;
}

tbody.question_body[data-activation='no'] .q_text {
  color:#c6c5c5;
}

.desc_wrap {
  padding:2rem 3rem;
}

.title{
  font-weight: 660;
  font-size:1.2em;
  margin-bottom:3rem;
}
.description {
  text-align: left;
  max-width: 1000px;
  font-size: 0.95em;
  line-height:1.8;
  font-weight: 400;
}
@media (max-width:768px){
  .desc_wrap {
    padding:2rem 1rem;
  }
}

.page_description {
  text-align: left;
  max-width: 800px;
  font-size: 0.8em;
}
.notice{
  font-size:1.7em;
}
.big2 {
  font-size:2em;
}
.big {
  font-size:2.2em;
}
.big-font { 
  font-size:1.5em;
}
.mid-font {
  font-size:1.3em;
}
@media (max-width:768px) {
  .mid-font { font-size:0.9em; }
}
div.othertype{
  width:100%;
  display: flex;
  flex-direction: row;
}
@media (max-width:768px){
  div.othertype{
    flex-direction: column;
  }
}
  .sign {
  float:left;
  font-size: 0.6em;
  line-height: 1.5;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  text-align: center;
  font-weight:500;
}
.sign_child {
  border-left: dashed 1px #ccc;
  border-top: dashed 1px #ccc;
  white-space: nowrap;
  padding:1em;
  font-weight:400;
}
.nowrap{
  white-space: nowrap;
}

.width33per{
  width:33%;
}
.width37per{
  width:37%;
}
.width40per{
  width:40%;
}
.width50per{
  width:50%;
}
.width59per{
  width:59%;
}
.width19per{
  width:19%;
}
.width100per{
  width:100%;
}
            /* スライダー全体のコンテナ */
.slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.main_title {
    font-size: calc(2rem + 1vh);
    padding: 20px 0px;
}

.q_title {
  padding: 3rem 0;
  border-bottom:1px dotted #ccc;
  font-weight: 500;
}

.q_line {
  border-bottom: 1px solid #ccc;
  padding-bottom: calc(2rem + 2vh);
}

.hide{
  color:transparent;
}

.yesblock,.noblock{
  font-weight: 600;
}
.yesblock{
  color:rgb(255, 89, 0);
}
.noblock{
  color:rgb(46, 60, 192);
}

tbody.question_body[data-activation='no'] .yesblock{
  color:rgb(247, 208, 187);
}

tbody.question_body[data-activation='no'] .noblock{
  color:rgb(169, 171, 193);
}
.left{
  text-align: left;
}
/* スライダー本体 */
.slider {
    -webkit-appearance: none; /* デフォルトスタイルをリセット */
    appearance: none;
    width: 100%;
    height: calc( 2.5rem + 1vh );
    border-radius: calc( 2rem + 1vh );
    outline: none;
    transition: background 0.3s ease-in-out;
    border:2px solid #FFF;
    box-shadow: 0px 2px 4px rgba(41, 39, 39, 0.2);
    background: linear-gradient(to right,rgb(106, 114, 181),rgb(216, 153, 94));
    background: linear-gradient(to right,rgb(46, 60, 192),rgb(239, 120, 8));
}

tbody.question_body[data-activation='no'] .slider {
  background: linear-gradient(to right,rgb(197, 197, 197),rgb(189, 188, 188));
}

/* スライダーのサム（つまみ） */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* デフォルトスタイルをリセット */
    appearance: none;
    width: calc( 2.5rem + 3vh );
    height: calc( 2.5rem + 3vh );
    background-color:rgb(122, 122, 122);
    border-radius: 50%;
    cursor: pointer;
    border:1px solid #FFF;
    box-shadow: 0px 2px 4px rgba(41, 39, 39, 0.2);
}

.slider::-moz-range-thumb {
  width: calc( 2.5rem + 3vh );
  height: calc( 2.5rem + 3vh );
  background-color:rgb(122, 122, 122);
  border-radius: 50%;
  border:1px solid #FFF;
  cursor: pointer;
}

/* ホバー時のエフェクト */
.slider:hover {
  background: linear-gradient(to right,rgb(46, 60, 192),rgb(239, 120, 8));
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

/* スライダー値の表示 */
.value-display {
    margin-top: 10px;
    font-size: 1em;
    font-weight: 700;
}
.image_mini{
  max-width:100px;
}

/* ボタンの基本スタイル */
.custom-button {
    display: inline-block;
    margin: 1.5rem;
    padding: 1.2rem 3rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: #1a3c6e;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(26, 60, 110, 0.25);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
  }

  .custom-button:hover {
    background: #152e56;
    box-shadow: 0 6px 20px rgba(26, 60, 110, 0.35);
    transform: translateY(-2px);
  }

  .custom-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(26, 60, 110, 0.25);
  }
  
  .mini-button {
    font-size: 1rem;
    padding: 1rem;
    margin: 0;
  }
object {
    pointer-events: none;
}
.tb_title{
    text-align: center;
    font-weight: 700;
    font-size: calc(1.5rem + 1vh);
    line-height: 1.5;
    padding:20px;
}
.center{
    text-align: center;
}
.left{
    text-align: left;
}
.right{
    text-align: right;
}
.no-border{
    border:none;
}


/* 基本スタイル */
.custom-submit {
    background: #1a3c6e;
    color: white;
    padding: 1rem 3.5rem;
    font-size: 1.6rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(26, 60, 110, 0.25);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }
  .custom-submit[id^='preview_button'] {
    margin-right: 2rem;
  }
  .custom-submit[id^='block_button'] {
    margin-left: 2rem;
  }
  .custom-submit#block_button1{
    margin-left: 0;
  }

  .custom-submit:hover {
    background: #152e56;
    box-shadow: 0 6px 20px rgba(26, 60, 110, 0.35);
    transform: translateY(-2px);
  }

  .custom-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(26, 60, 110, 0.25);
  }

.picture ,.picture_r{
    width:30vw;
}

.dropshadow{
  filter: drop-shadow(1px 1px 1px #4c4c4c);
}

.picture_box{
    display: block;
    margin:0 auto;
    filter: drop-shadow(3px 3px 3px #4c4c4c);
}
img{
  height: auto;
}
img.dia {
    clip-path: polygon(50% 0, 100% 50%,
                        50% 100%, 0 50%);
    transition: 1s clip-path;
    max-width: 100%;
}

img.charactor {
  margin-top:1.5rem;
  width:100%;
  max-width: 650px;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
img.charactor_top {
  margin-top:1.5rem;
  width: 75%;
  max-width: 350px;
  object-fit: contain;
}
img.charactor_middle {
  margin-top:1.5rem;
  width:100%;
  max-width: 350px;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
img.charactor_100 {
  margin:none;
  width:100%;
  max-width: 250px;
  min-width: 150px;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
img.charactor_90 {
  margin:none;
  width:100%;
  max-width: 250px;
  min-width: 120px;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
img.charactor_little {
  margin-top:1.5rem;
  width: 75%;
  max-width: 450px;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
img.charactor_comp {
  margin-top:1.5rem;
  width:100%;
  max-width: 300px;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
.charactor_comp_desc {
  /* width:50%; */
  /* max-width: 500px; */
  margin: 0 auto;
  clip-path: rect(5px 100% 100% 5px round 5%);
}


@media (max-width:768px){
  .charactor_comp_desc {
    width:80%;
  }
}


img.charactor_comp_desc2 {
  width:100%;
  max-width: 800px;
  margin: 2rem auto;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
img.charactor_comp_desc3 {
  width:80%;
  max-width: 800px;
  margin: 2rem auto;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
div.comp_img_wrap {
  display:none;
  flex-direction: column;
}
img.charactor_profile {
  width: 100%;
  max-width: 550px;
  margin-top:1.5rem;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
img.charactor_mypage {
  width: 100%;
  max-width: none;
  /* clip-path: rect(5px 100% 100% 5px round 5%); */
}
img.charactor_mini {
  margin-top:1.5rem;
  width:45%;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
img.charactor_mini_other {
  margin-top:1.5rem;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
img.charactor_mini2 {
  margin-top:1rem;
  width:35%;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
.img_question{
  width:100%;
}
img.question{
  width: 75%;
  max-width: 450px;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
.border_radius {
  border-radius: 2rem;
}
.copyright{
    font-size:1rem;
    color:#333;
    width:100%;
    padding:0px;
    margin:10px auto;
    margin-bottom:50px;
    text-align: center;
}
/*　スクロールエフェクト*/
.inview {
    /* 30px下げる */
    transform: translateY(30px);
    /* 要素を透明にする */
    opacity: 0;
    /* 2秒かけて、変化させる */
    transition: transform 2s, opacity 2s;
  }
  
  .inview.show {
    transform: translateY(0);
    opacity: 1;
  }

  
  /* ラベルのスタイル */
  .email-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
  }
  
  /* メール入力欄の基本スタイル */
  .custom-email-input {
    width: 100%;
    max-width:200px;
    padding: 10px;
    color: #333;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 0.7rem;
    /* box-shadow: inset 0px 2px 4px rgba(0,0,0,0.1), 
                0px 4px 6px rgba(0,0,0,0.2); */
    transition: all 0.3s ease-in-out;
    font-size:0.8em;
  }
  
  /* フォーカス時のエフェクト */
  .custom-email-input:focus {
    background-color: #fff;
    outline: none;
    box-shadow: inset 0px -2px 4px rgba(0,0,0,0.1);
  }
  
  /* プレースホルダーのスタイル */
  .custom-email-input::placeholder {
    color: #aaa;
  }
  
  /* ホバー時のエフェクト */
  .custom-email-input:hover {
    box-shadow: 0px 1px 3px rgba(50,150,255,0.3);
  }
  /* コンテナのスタイル */
  .custom-select-container {
      margin: 1.5rem 1rem;
  }
  
  /* ラベルのスタイル */
  .custom-select-container label {
    font-weight: 600;
    font-size: 0.8em;
    color: #333;
    margin:0;
    display:inline-block;
    text-align: right;
    margin-right: 1rem;
    width:70px;
  }
  
  /* セレクトボックスの基本スタイル */
.custom-select {
    font-size:0.8em;
    max-width:200px;
    padding: 10px;
    margin-right:10px;
    font-weight: normal;
    color: #333;
    background-color: #f9f9f9;
    /* border: none;
    border-radius: 20px; 
                box-shadow: inset 0px 2px 4px rgba(0,0,0,0.1), 
                            0px 4px 6px rgba(0,0,0,0.2); */
    border: 1px solid #ccc;
    border-radius: 0.7rem;
    appearance: none; /* デフォルトスタイルをリセット */
    cursor: pointer; /* カーソルをポインターに変更 */
}

  
  /* 矢印アイコンのカスタム（セレクトボックス右側） */
.custom-select-container {
    position: relative; /* 親要素を基準にするため */
}
  
.custom-select::after {
    content: '▼'; /* 矢印アイコン */
    position: absolute;
    right: 15px; /* 矢印の位置調整 */
    top: calc(50% - 8px); /* 矢印を垂直中央に配置 */
    font-size: 1.5rem;
    color:#000;
}
  
  /* フォーカス時のエフェクト */
.custom-select:focus {
    background-color: #fff; /* 背景色を白に変更 */
    outline: none; /* デフォルトのアウトラインを削除 */
    box-shadow: 0px 1px 3px rgba(50,150,255,0.3);
}
  
  /* ホバー時のエフェクト */
.custom-select:hover {
  box-shadow: 0px 1px 3px rgba(50,150,255,0.3);
}

.form_table td {

  border:none;
  padding:12px;

}
h3[id^='relation_title'] {
  margin-top:1rem;
  text-align: center;
}
#relation_description,
#relation_quadra_desc,
#relation_quadra_romance,
#relation_club_desc,
#relation_temperaments_desc
{
  margin-top:2rem;
  font-weight: 400;
  color:#333;
}
.eng[id^='relation_en_title'] {
  text-align: center;
  margin:0;
}
#relation_en_title_desc{
  font-weight:400;
  color:#333;
}

#relation_description_wrap{
  visibility: hidden;
}

#relation_quadra_wrap,
#relation_club_wrap,
#relation_temperaments_wrap
{
  display:none;
}

/* タイプ結果　相性テーブル */
table.comp_table td,
table.comp_table th
{
  padding: 1rem 2rem;
  white-space: nowrap;
}

table.comp_table th
{
  padding: 1rem 2rem;
  background-color: #f3f3f3;
  color:#2c2c2c;
  font-weight: 600;
  position: sticky;
  width:100%;
  top:0;
  left: 0;
  z-index: 1;
}
table.comp_table  thead tr:first-of-type th:first-of-type {
  z-index: 2;
}
.relative_pos{
  position: relative;
}
.fixed_table{
  table-layout: fixed;
}
.arrow-horizontal_r {
  position: absolute;
  top: 35%; /* テーブルの中央に配置 */
  left: 0;
  width: 97%;
  height: 0;
  border-top: 3px solid #333; /* 矢印の線 */
  z-index:1;
}
.arrow-horizontal_r::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -10px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #333; /* 矢印の先端 */
}
.arrow-horizontal_l {
  position: absolute;
  top: 35%; /* テーブルの中央に配置 */
  right: 0;
  width: 97%;
  height: 0;
  border-top: 3px solid #333; /* 矢印の線 */
  z-index:1;
}
.arrow-horizontal_l::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -10px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 14px solid #333; /* 矢印の先端 */
}

.arrow-vertical5 {
  position: absolute;
  right: 7%;
  top: 0;
  width: 0;
  height: 100%;
  border-left: 3px solid #333;
  transform: translateX(-50%);
}
.arrow-vertical5::after {
  content: "";
  position: absolute;
  right: calc( 7% - 14px );
  bottom: -5px; /* 先端を線の下に出す */
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid #333; /* ここが矢印の先端 */
  width: 0;
  height: 0;
}

.arrow-vertical5_s {
  position: absolute;
  left: 7%;
  top: 0;
  width: 0;
  height: 100%;
  border-left: 3px solid #333;
  transform: translateX(-50%);
}
.arrow-vertical5_s::after {
  content: "";
  position: absolute;
  left: calc( 7% - 1px );
  bottom: -5px; /* 先端を線の下に出す */
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid #333; /* ここが矢印の先端 */
  width: 0;
  height: 0;
}

.arrow-vertical3 {
  position: absolute;
  left: 7%;
  top: 0;
  width: 0;
  height: 100%;
  border-left: 3px solid #333;
  transform: translateX(-50%);
}
.arrow-vertical3::after {
  content: "";
  position: absolute;
  left: calc( 7% - 1px );
  top: -5px; /* 先端を線の下に出す */
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #333; /* 上向き三角形 */
  width: 0;
  height: 0;
}

.arrow-vertical3_s {
  position: absolute;
  right: 7%;
  top: 0;
  width: 0;
  height: 100%;
  border-left: 3px solid #333;
  transform: translateX(-50%);
}
.arrow-vertical3_s::after {
  content: "";
  position: absolute;
  right: calc( 7% - 14px );
  top: -5px; /* 先端を線の下に出す */
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #333; /* 上向き三角形 */
  width: 0;
  height: 0;
}

.border_rounded{
  max-width: 1000px;
  text-align: center;
}
@media (max-width:768px){
.border_rounded{
  max-width: 400px;
}
}
th.gray {
  background: rgba(100, 100, 100, 0.3);
}
th.darkgray {
  background: rgba(50, 50, 50, 0.3);
}
.nolineheight{
  line-height: 1.2;
}

table.radius_table {
  border-spacing: 0;
  text-align: center;
}
table.radius_table th, table td {
  vertical-align: middle;
}
table.radius_table th + th,
table.radius_table th + td,
table.radius_table td + th,
table.radius_table td + td {
  border-left: 1px dotted #aaa;
}
table.radius_table td {
  background: #fff;
}
table.radius_table tr + tr th,
table.radius_table tr + tr td {
  border-top: 1px solid #aaa;
}
.func {
  padding:0.9rem 0.4rem;
  border-radius: 1rem;
  position:relative;
  z-index:2;
}
.sign {
  padding:0.9rem 0.3rem;
  border-radius: 1rem;
  position:relative;
  line-height: 1;
  width:80px;
  z-index:2;
}
.socio_group {
  padding:0.9rem 0.3rem;
  border-radius: 1rem;
  position:relative;
  line-height: 1.2;
  width:132px;
  height:42px;
  z-index:2;
  letter-spacing: -0.02em;

  display: flex;
  justify-content: center; 
  align-items: center; 
}
.func_desc {
  padding:3.5rem 3rem;
  font-size:0.8em;
}
.func_wrap{
  margin: 1rem auto;
}
.small{
  font-size:0.9em;
}
img.float{
  float: right;
  clip-path: rect(5px 100% 100% 5px round 5%);
  margin-left:3rem;
  margin-bottom: 3rem;
  width:100%;
  max-width:330px;
}

@media (max-width:768px){
  img.float{
    float:none;
    width:100%;
    margin:auto;
    margin-bottom: 2rem;
  }
}

h5{
  font-weight: 600;
  font-size: 1.1em;
  display: inline;
  line-height: 1.8;
  /* border-bottom: 1px dashed #000; */
}
.func_table{
  font-size:100%;
  table-layout:auto;
  width:100%;
  border-collapse: collapse;
}
.func_in_table,
.func_in_table tr
{
  margin:0;
  padding:0;
  border-collapse: collapse;
  border-spacing: 0;
  border:none;
}
.shippori-mincho-regular {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
.josefin-sans-400 {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.lineheight15{
  line-height: 1.5;
}
.nopadding{
  padding:0;
}
.owl-prev,
.owl-next {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
}
.owl-prev,
.owl-next{
  background-color: rgba(255, 255, 255, 0.5);
  padding:5px;
  border-radius: 5px;
  font-size:1.2em;
}
.owl-prev::selection,
.owl-next::selection {
  background-color: rgba(255, 255, 255, 0);
}
.owl-prev:hover,
.owl-next:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.owl-prev {
  left: calc( (100vw - 560px) / 2 );
}

.owl-next {
  right: calc( (100vw - 560px) / 2 );
}

select[id^='select_type'] {
  width:100%;
  min-width:300px;
  max-width:500px;
  text-align-last: center;
  border-radius: 3rem;
}
label[id^='select_type_label'] {
  width:100%;
  min-width:300px;
  max-width:500px;
  text-align: center;
}

select#sex {
    max-width:120px;
}
input#name {
    width:100%;
    max-width:350px;
}
input#age {
    max-width:50px;
}
input#email {
    max-width:350px;
}
select#prefecture {
    max-width:200px;
}
input:focus::-webkit-input-placeholder {
	color: transparent;
}
input:focus::-moz-placeholder {
	color: transparent;
}
input:focus::-ms-input-placeholder {
	color: transparent;
}
input:focus::placeholder {
	color: transparent;
}
.width200{
  max-width:150px;
}
.widthmaxcontent{
  max-width:max-content;
}
/* コンテナのスタイル */
.meter-container {
    width: 100%;
        display:inline-block;
    font-size: 1rem;
  }
  .func_meter .meter-container{
    width:100%;
  }
  .func_meter_table{
    margin:auto;
    width:100%;
    max-width:1000px;
    position: relative;
    justify-self: center;
    table-layout: fixed;
    padding:2rem;
    border-spacing: 0;
    border-radius:2rem;
  }

  .func_meter_table td{
    padding: 1rem;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
  }

  /* ラベルのスタイル */
  .meter-container label {
    font-size: 2em;
    font-weight:500;
    color: #333;
    width: 50%;
  }
  .func_meter_table  .meter-container label {
    width:50%;
  }
  
  /* meterタグの基本スタイル */
  meter {
    width: 70%;
    height: 20px;
    background-color: lightgrey; /* デフォルトの背景色 */
    border-radius: 9px; /* 丸みを追加 */
    box-shadow: inset 0px -1px 2px rgba(0,0,0,0.1), 
                0px 2px 3px rgba(0,0,0,0.2); /* シャドウで立体感を演出 */
    margin: 1.5rem 0;
    margin-bottom: 1rem;
    font-size: 1rem;
  }
  .func_meter_table meter{
    width: 50%;
    height: 10px;
  }
  
  /* Webkitブラウザ用のカスタムスタイル */
  meter::-webkit-meter-bar {
    background-color: #e0e0e0; /* 背景色を変更 */
  }
  
  meter::-webkit-meter-optimum-value {
    background-color: #4caf50; /* 最適値の色 */
  }
  
  meter::-webkit-meter-suboptimum-value {
    background-color: #ffeb3b; /* サブ最適値の色 */
  }
  
  meter::-webkit-meter-even-less-good-value {
    background-color: #f44336; /* 最低値の色 */
  }
  
  /* Firefoxブラウザ用のカスタムスタイル */
  meter::-moz-meter-bar {
    background-color: #4caf50; /* 最適値の色 */
  }
  

  .styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-weight: 200;
    max-width: 600px;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}
.styled-table th,
.styled-table td {
    padding: 1.2rem 1.3rem;
    font-size: 1.5rem;
}
.styled-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.title_logo{
  max-width:200px;
  width:clamp(140px, 40vw, 200px);
  margin-right:2rem;
  height:auto;
}

.title_logo_footer{
  /* ❶ デスクトップでは 400 px を上限に */
  max-width:350px;

  /* ❷ 画面幅が狭いときは 70 vw (= 画面の 70%) に自動縮小 */
  width:clamp(180px, 65vw, 230px);

  margin:auto;
  height:auto;                 /* 縦横比を維持 */
}
  .menu_link_list a{
    color: #555;
    font-size: 13px;
    font-weight: 500;
  }
  .menu_link_list a:hover{
    color: #1a1a2e;
    text-decoration: none;
  }
@media (max-width:960px){
  .title_logo{ margin-right:4rem;}
  .menu_link_list a{
    color:#1a1a2e;
  }
}

/* 基本スタイル */
.header {
  position:relative;
  padding: 16px 24px;
  display: flex;
  justify-content: center;
  flex-direction: row;
  background:#fff;
  border-bottom:1px solid #e5e5ea;
  align-items: center;
  margin: 0;
}
@media (max-width:960px){
  .header {
    padding-top:2.8rem;
    padding-bottom:2.5rem;
  }
}

.header_logo {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-left:3rem;
}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.menu li {
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.menu a {
  text-decoration: none;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.menu a:hover {
  color: #1a1a2e;
}


/* サブメニュー */
/* submenu base — list reset only (positioning handled by breakpoints) */
.submenu {
  list-style: none;
  margin: 0;
  text-align: left;
}
.submenu li, .submenu a { text-align: left; }

/* submenu — PC default (>960px uses this + media query overrides) */
@media (min-width:961px){
  .submenu {
    padding: 6px 0;
    border-radius: 8px;
    position: absolute;
    top: calc(100% + 1px);
    left: auto;
    right: 0;
    min-width: 0;
    width: max-content;
    background-color: #fff;
    border: 1px solid #e5e5ea;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    display: none;
    z-index:5;
  }
  .submenu li {
    margin: 0;
  }
  .submenu a {
    display: block;
    width: 100%;
    color: #333;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
  }
  .submenu a:hover {
    background: #f0f0f5;
    color: #1a1a2e;
  }
}
/* サブメニューのトグル */
.submenu-toggle {
  display:none;
}

/* ハンバーガーメニュー */
.menu-toggle {
  display: none;
}

/* ===== ハンバーガー開閉アニメーション ===== */
.hamburger {
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px; height:40px;
  padding:8px;
  border-radius:10px;
  transition: background .2s;
  cursor:pointer;
}
.hamburger:hover { background: rgba(0,0,0,0.05); }
.hamburger span{
  display:block;
  width:20px; height:2px;
  background:#1a1a2e;
  border-radius:2px;
  transition: transform .3s ease, opacity .2s ease, width .2s ease;
}
.hamburger span:nth-child(1){ width:20px; }
.hamburger span:nth-child(2){ width:16px; }
.hamburger span:nth-child(3){ width:20px; }

/* ─ 変形（開⇄閉） ─ */
#menu-toggle:checked + .hamburger span:nth-child(1){
  transform:translateY(7px) rotate(45deg); width:20px;
}
#menu-toggle:checked + .hamburger span:nth-child(2){
  opacity:0;
}
#menu-toggle:checked + .hamburger span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg); width:20px;
}
/* ===== オーバーレイ（フェード背景） ===== */
.menu-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0);
  backdrop-filter:blur(0);
  z-index:9999;
  transition: background .3s ease, backdrop-filter .3s ease;
}
#menu-toggle:checked ~ .menu-overlay{
  display:block;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(3px);
}

/* ===== “×” 閉じるボタン（メニュー内上部） ===== */
.close-btn{
  display:none;
}
/* ===== モバイルメニューのスライド表示 ===== */
@media (max-width:960px){
  .nav{
    display:flex!important;
    flex-direction:column;
    position:fixed; top:0; right:-100%;
    width:84%; max-width:360px; height:100dvh;
    padding:0;
    background:#fff;
    transition:right .32s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start;
    z-index:10000;
    box-shadow:-4px 0 24px rgba(0,0,0,0.06);
  }

  .hamburger { display:inline-flex; }

  #menu-toggle:checked ~ .nav{ right:0; }

  #menu-toggle:checked ~ .hamburger span:nth-child(1){
    transform:translateY(7px) rotate(45deg); width:20px;
  }
  #menu-toggle:checked ~ .hamburger span:nth-child(2){ opacity:0; }
  #menu-toggle:checked ~ .hamburger span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg); width:20px;
  }

  body:has(#menu-toggle:checked){ overflow:hidden; }
  #menu-toggle:checked ~ .menu-overlay{ display:block; }

  /* ── 閉じるボタン（メニュー上部） ── */
  .close-btn{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    padding:16px 20px 12px;
    font-size:0;        /* テキスト「×」を隠す */
    cursor:pointer;
    box-sizing:border-box;
  }
  .close-btn::before{
    content:'';
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px; height:36px;
    border-radius:50%;
    background:#f4f4f5;
    background-image:
      linear-gradient(45deg, transparent 43%, #666 43%, #666 45%, transparent 45%),
      linear-gradient(-45deg, transparent 43%, #666 43%, #666 45%, transparent 45%);
    background-size:16px 16px;
    background-repeat:no-repeat;
    background-position:center;
    transition:background-color .15s;
  }
  .close-btn:hover::before{ background-color:#eaeaec; }

  /* ── メニューリスト ── */
  ul.menu{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    padding:4px 0 6rem;
    margin:0;
  }

  .menu li{
    border-bottom:none;
  }

  .menu a{
    display:flex;
    align-items:center;
    padding:15px 32px;
    color:#1e293b;
    font-size:15px;
    font-weight:500;
    letter-spacing:0.01em;
    transition:background .15s;
  }
  .menu a:hover{
    background:#f8f9fa;
    color:#1e293b;
  }

  .menu_link_list a{ color:#1e293b; }

  /* 項目間セパレータ（線ではなくスペースで） */
  .menu > li + li{
    border-top:1px solid #f0f1f3;
  }

  /* ── ログイン・テストボタン ── */
  .menu_link2{
    color:#1e293b !important;
  }
  .menu .custom-button{
    margin:20px 32px 8px;
    text-align:center;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
  }

  /* ── アイコン ── */
  .icon_link{
    padding:0 32px;
  }
  .header-type-icon{
    border-radius:10px;
  }
}

/* ===== デスクトップ：サブメニューの位置微調整 ===== */
@media (min-width:769px){
  .submenu{
    min-width:200px;
  }
}

.submenu-label{
  font-size: 13px;
  font-weight: 500;
  color: #555;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
}
/* submenu-label mobile rules moved to unified block at end of file */

/* 基本スタイル */
.form-container {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.input-group input:focus {
  border-color: #04AA6D;
  outline: none;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #04AA6D;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #038a57;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .form-container {
    padding: 20px;
    width: auto;
    box-shadow: none; /* モバイルでは影を軽減 */
    border-radius: none; /* モバイルでは角をフラットに */
 }
}
.loaded {
  opacity: 0;
  visibility: hidden;
}
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: rgb(139,162,193,1);
  background: linear-gradient(45deg,  rgba(151, 217, 225, 1) 0%,rgba(139,162,193,1) 100%);
  /* 以下のコードを追加 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display:flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 30%;
  height: 30%;
  margin: 30% auto;
  display: block;
}

.loader {
  color: #ffffff;
  font-size: 1em;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

@-webkit-keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.shadow-effect {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  text-align: center;
  border:1px solid #ECECEC;
  box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02);
}
.testimonial-name {
  margin: -17px auto 0;
  display: table;
  width: auto;
  background:#333;
  padding: 9px 35px;
  border-radius: 12px;
  text-align: center;
  color: #fff;
  box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05);
}
[id^='customers-testimonials'] .item {
  text-align: center;
  padding: 50px;
  margin-bottom:80px;
  opacity: .2;
  -webkit-transform: scale3d(0.8, 0.8, 1);
  transform: scale3d(0.8, 0.8, 1);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 2rem;
}
[id^='customers-testimonials'] .owl-item.active.center .item {
  opacity: 1;
  -webkit-transform: scale3d(1.0, 1.0, 1);
  transform: scale3d(1.0, 1.0, 1);
}
.owl-carousel .owl-item img {
  transform-style: preserve-3d;
  max-width: 350px;
  margin: 0 auto 17px;
}
[id^='customers-testimonials'].owl-carousel .owl-dots .owl-dot.active span,
[id^='customers-testimonials'].owl-carousel .owl-dots .owl-dot:hover span {
  background: #2163a0;
  transform: translate3d(0px, -50%, 0px) scale(0.7);
}
[id^='customers-testimonials'].owl-carousel .owl-dots{
  display: inline-block;
  width: 100%;
  text-align: center;
}
[id^='customers-testimonials'].owl-carousel .owl-dots .owl-dot{
  display: inline-block;
}
[id^='customers-testimonials'].owl-carousel .owl-dots .owl-dot span {
  background: #16426c;
  display: inline-block;
  height: 20px;
  margin: 0 2px 5px;
  transform: translate3d(0px, -50%, 0px) scale(0.3);
  transform-origin: 50% 50% 0;
  transition: all 250ms ease-out 0s;
  width: 20px;
}
a {
  color: #fff;
}
a:hover {
  color: #fff;
}


.h4-container {
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
}
.h4-container .h4-subcontainer {
  width: 100%;
  position: relative;
}
.h4-container .h4-subcontainer h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  left: 50%;
  width: 40px;
  height: 40px;
  color: #fff !important;
  font-size: calc(1rem + 0.4vh);
  transform-origin: center -10px;
  transform: translateX(-50%);
  transition: margin-top 0.15s ease-in-out, opacity 0.15s ease-in-out;
}
.h4-container .h4-subcontainer h4 span {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background-color: rgb(46, 60, 192);
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  z-index: -1;
}
input:not(:active) + .h4-container h4 {
  opacity: 0;
  margin-top: calc( -40px + 4vh );
  pointer-events: none;
}

/* ① ブレークポイントを決める ───────────────── */
@media (min-width: 961px){       /* ← PC とみなす幅 */

  /* ② ベース：メニューを横並びに & 位置調整 */
  .header .nav{
  }
  .header .menu{
    display:flex;
    align-items:center;
  }
  .header .menu > li{
    position: relative;
  }

  /* ③ サブメニュー本体 ------------------ */
  .submenu{
    position: absolute;
    right: 0;
    left: auto;
    top: 100%;
    background:#222;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    border: 1px solid #333;
    border-radius: 8px;
    z-index:999;
    width: max-content;
    display:none;
    padding: 6px 0;
    box-sizing:border-box;
  }

  /* ③ サブメニュー＝メガメニュー本体 ------------------ */
  .submenu.mega-menu{
    /* レイヤー */
    position:absolute;
    left:0; top:100%;    
    top:calc(var(--header-h,80px));
    width:100vw;           
    background:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    border-top:2px solid #169;
    z-index:999;

    /* レイアウト */
    display:none;                /* デフォルト非表示 */
    padding:3rem max(4vw,60px);  /* 左右ゆったり */
    box-sizing:border-box;

    transition: opacity 0.3s ease;
    pointer-events: none;
    opacity: 0;
  }

  /* ④ サブメニュー内のリンクをカード風に */
  .submenu li{break-inside:avoid;}
  .submenu a{
    display:block;
    line-height:1.4;
    padding:.4rem 0;
    white-space:nowrap;
    transition:color .2s;
  }

  /* ⑤ ホバーで展開（チェックボックスも活用） */
  .menu > li:hover   > .submenu,
  .menu > li:focus-within > .submenu,
  .has-submenu input.submenu-toggle:checked + .submenu{
       display:block;
       opacity: 1;
       pointer-events: auto;
  }

  /* ⑥ ハンバーガー UI を PC では隠す */
  .hamburger, .menu-overlay,
  .has-submenu input.submenu-toggle{
       display:none;
  }
}

/* ⑦ フェード＋スライド微アニメ */
@keyframes fadeSlide{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:translateY(0)}
}

/* ─── メガメニュー内カード ───────────────────── */
.submenu.type-grid a,
.submenu.mega-menu a{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.6rem 1rem;
  border-radius:8px;
  color:#333;
  text-decoration:none;
}
/* ─── 通常サブメニューのリンク（PC） ───────────────────── */
@media (min-width:961px){
  .submenu:not(.type-grid):not(.mega-menu) a{
    display:block;
    padding:8px 16px;
    font-size:13px;
    font-weight:500;
    color:#fff;
    text-decoration:none;
    transition: background 0.15s, color 0.15s;
  }
  .submenu:not(.type-grid):not(.mega-menu) a:hover{
    background:rgba(255,255,255,0.1);
    color:#fff;
  }
}


/* アイコン丸抜き */
.submenu a img{
  width:44px; height:44px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 2px #fff;    /* 白フチで映える */
}

/* --- サブメニュー本体をフルワイドに伸ばし、
        画面高いっぱいでスクロールできるように ---------- */
        .submenu.type-grid{
          position: static;                 /* 親の中で普通に流す */
          width:100%;                       /* 端から端まで */
          padding:1.5rem 2rem;
          box-sizing:border-box;

          display:block;

          max-height:calc(100vh - 120px);   /* ヘッダー高さぶんを差し引き */
          overflow-y:auto;                  /* 足りなければ内部でスクロール */
        }
        
        /* カード内の並びを横並びに */
        .submenu.type-grid a{
          display:flex; align-items:center;
          gap:.6rem;
          padding:.6rem .4rem;
          border-radius:.5rem;
          /* transition:background .15s; */
        }
        .submenu.type-grid a:hover{
          background:rgba(255,255,255,.10);
        }
        .submenu a:hover{
          background:rgba(255,255,255,.10);
        }
        
        /* 顔アイコン */
        .submenu.type-grid img.face{
          width:48px; height:48px;
          border-radius:50%;
          flex-shrink:0;
        }
        
        /* テキストを読める色に（PC ダーク背景想定） */
        .submenu.type-grid span{color:#fff;}

        /* ============ TOP ナビ全体 ============ */
.menu{display:flex; align-items:center; padding:0; margin:0; list-style:none;}
.menu a{ text-decoration:none; font-weight:600;}
.menu .custom-button{
  margin: 0 1rem;
  padding: 0.5em 1.5em;
  font-size: 13px;
}

/* ============ ▼▼ 16タイプ・グリッド ▼▼ ============ */
@media (min-width:961px){
  .submenu.type-grid{
    position:absolute;
    left:50%; transform:translateX(-50%);
    top:100%;
    width:90vw; max-width:900px;
    background:#222; border-radius:0 0 1rem 1rem;
    padding:1.5rem 2rem; box-sizing:border-box;
    display:block;
    max-height:calc(100vh - 160px);
    overflow-y:auto;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    visibility:hidden; opacity:0;
  }
  /* PC：hover / focus で表示 */
  .has-submenu:hover  > .submenu,
  .has-submenu:focus-within > .submenu{
    visibility:visible; opacity:1;
  }
  .has-submenu > .submenu-toggle:checked ~ .submenu{
    visibility:visible; opacity:1;
  }
}

/* ------------ グリッド内 1 カード ------------ */
.submenu.type-grid li{list-style:none;}
.submenu.type-grid a{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .4rem; border-radius:.6rem;
}
.submenu.type-grid a:hover{background:rgba(255,255,255,.10);}

.submenu.type-grid img.face{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;margin-right:0.5rem;
}
@media (min-width:961px){
  .submenu.type-grid span{
    color:#fff; font-size:.9rem; white-space:nowrap;
  }
  /* サブメニュー (= ダーク背景内) は白のまま */
  .submenu a,
  .submenu span{
    color:#fff;
  }
}

/* 3) サイドメニュー化するモバイル幅 — 白背景なので暗い文字 */
@media (max-width:768px){
  .nav a{color:#1a1a2e;}
}
/*============================
  1) サブメニュー背景をすべて統一（PC専用）
============================*/
@media (min-width:961px){
  .submenu.type-grid,
  .submenu.mega-menu{
    background:#222 !important;
  }
  .submenu:not(.type-grid):not(.mega-menu){
    background:#222 !important;
    border-color:#333 !important;
  }
}

/* PCでドロップダウンさせる .type-grid だけ境界線を残す */
@media (min-width:769px){
  .submenu.type-grid{
    border-top:2px solid #169;  /* 既存のアクセント */
  }
}

/*============================
  2) タイプ16種カードの文字を大きく
============================*/
.submenu.type-grid a span{
  font-size:1rem;               /* ≒ 16px（※html 62.5%換算） */
  line-height:1.4;
}

/* 大きなデスクトップではさらに 10% だけ拡大 */
@media (min-width:1200px){
  .submenu.type-grid a span{
    font-size:1.1rem;
  }
}


/* モバイル（ハンバーガー展開）— 白背景メニュー */
@media (max-width:768px){
  .nav a{color:#1a1a2e;}
}
/* ───────── 追加または既存 .submenu の直後に貼り付け ───────── */

/* ① PC 幅（769px〜）での通常ドロップダウン */
@media (min-width:769px){

}

/* ② モバイル側（ハンバーガー展開時）は既存レイアウトを優先
      → 何もしなくて OK。*/

      /* 16タイプのカード文字を統一して大きめに */
.submenu.type-grid a span{
  font-size:2rem;              /* =16px（html 62.5% 換算）*/
  line-height:1.4;
}
@media (min-width:1200px){
  .submenu.type-grid a span{font-size:1.5rem;}
}
/* メニュー下層は全部同じ色に（PC） */
@media (min-width:769px){
  .submenu,
  .submenu.type-grid{
    background:#222 !important;
  }
}

/* ========= PC (769px〜) 専用 ― タイプメガメニュー ========= */
/* @media (min-width:769px){
  .submenu.type-grid{
    position:absolute;                 
    left:50%; transform:translateX(-50%);
    top:calc(var(--header-h,80px) + 6px); 
    width:90vw; max-width:900px;
    background:#222;
    border-radius:0 0 1rem 1rem;
    padding:1.5rem 2rem;
    box-shadow:0 8px 24px rgba(0,0,0,.35);

    max-height:calc(100vh - var(--header-h,80px) - 32px);
    overflow-y:auto;
    scrollbar-gutter:stable;      
    z-index:1500;
  }
} */

/* ===== 共通：カードの文字を読みやすく少し拡大 ===== */
.submenu.type-grid a span{ line-height:1.4;}

/* ====== PC 幅 769px〜 で “画面全体” に表示させる ====== */
@media (min-width:769px){
  /* メガメニューの親 li は static にして header 基準にする */
  .has-submenu:has(> .mega-menu){
    position:static !important;
  }
  .submenu.mega-menu{                     /* ← ❶ 追加したクラスで限定 */
    position:absolute;
    left:0;
    right:0;
    transform:none;
    top:100%;                             /* ヘッダー直下に隙間なく */

    width:100%;                           /* 親(.header)の幅いっぱい */
    max-width:none;

    padding:2rem clamp(48px, 8vw, 120px);
    box-sizing:border-box;

    background:#222;                      /* 背景を統一 */
    border-top:2px solid #169;            /* アクセントライン */
    box-shadow:0 12px 28px rgba(0,0,0,.35);

    /* ===== レイアウト ===== */
    display:block;
    gap:0;

    /* 画面高を超えたら中だけスクロール */
    max-height:calc(100vh - var(--header-h,80px));
    overflow-y:auto;
    scrollbar-gutter:stable;              /* 横幅ブレ防止 */

    /* アニメ用 */
    /* visibility:hidden; opacity:0; transition:opacity .18s ease; */
    z-index:1500;
  }

  /* ❷ ホバー／フォーカスで出す（チェックボックス方式とも両立） */
  .has-submenu:hover   > .submenu.mega-menu,
  .has-submenu:focus-within > .submenu.mega-menu,
  .has-submenu > .submenu-toggle:checked ~ .submenu.mega-menu{
    visibility:visible; opacity:1;
  }
}

/* --- カードの文字サイズを読みやすく統一 --- */
.submenu.mega-menu a span{ line-height:1.4;}

/* --- ダーク背景上なので文字は白固定（PC） --- */
@media (min-width:961px){
  .submenu.mega-menu a,
  .submenu.mega-menu span{color:#fff;}
  .submenu.mega-menu{
    overflow-y:scroll;
    scrollbar-gutter:stable;
  }
  .submenu.mega-menu{
    scrollbar-width:thin;
  }
}
.submenu.mega-menu::-webkit-scrollbar{
  width:8px; height:8px;          /* Chrome系 */
}
.submenu.mega-menu::-webkit-scrollbar-track{
  background:transparent;
}
.submenu.mega-menu::-webkit-scrollbar-thumb{
  background:#555; border-radius:4px;
}

/* ===== メニュー：クアドラ2段レイアウト ===== */
.menu-qrow{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:.5rem;
  margin-bottom:.5rem;
}
.menu-qcol{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  padding:.5rem;
  border-radius:.5rem;
}
.menu-qcol-type{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .4rem;
  border-radius:.4rem;
  text-decoration:none;
  transition:background .15s;
}
.menu-qcol-type:hover{
  background:rgba(255,255,255,.15);
}
.menu-qcol-type img.face{
  width:40px; height:40px;
  border-radius:50%;
  flex-shrink:0;
}
.menu-qcol-type span{
  color:#fff;
  font-size:.78rem;
  line-height:1.3;
  white-space:nowrap;
}

/* PC */
@media (min-width:769px){
  .submenu.type-grid.mega-menu{
    padding:1rem;
  }
}

/* モバイル: 2列に・白背景対応 */
@media (max-width:768px){
  .menu-qrow{
    grid-template-columns:repeat(2, 1fr);
    gap:.4rem;
  }
  .menu-qcol{
    padding:.4rem;
  }
  .menu-qcol-type img.face{
    width:32px; height:32px;
  }
  .menu-qcol-type span{
    color:#333 !important;
    font-size:.7rem;
  }
  .menu-qcol-type:hover{
    background:rgba(0,0,0,.06);
  }
}

.menu_link,
.menu_link2 {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  box-sizing: border-box;
  border: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
@media (max-width:768px){
  .menu_link,
  .menu_link2 {
    padding:15px 32px;
    font-size:15px;
    color:#1e293b;
    width:100%;
    box-sizing:border-box;
  }
}

.icon_link {
  padding:0 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
@media (max-width:768px){
  .icon_link {
    padding:12px 32px;
  }
}
.header-type-icon{
  border-radius: 50%;
  object-fit: cover;
}
@media (max-width:768px) {
  .header-type-icon{
    margin-top:0;
    border-radius:10px;
  }
}

.menu_link:hover {
  color: #1a1a2e;
}
.menu_link2:hover {
  color: #1a1a2e;
}
a.custom-button,
a.custom-button:visited,
a.custom-button:hover{
  color:#fff;
}


/* ───────── PC だけ適用 ───────── */
@media (min-width:769px) {

  /* 1) section.menu の中身を「ロゴ＋メニュー」で横並び中央寄せ */
  section.menu_section{justify-content:center; }  /* ←お好みで gap 調整 */

  /* 2) nav 自体を中央固定にし、余計なオフセットをゼロへ */
  .nav{
    margin-left:0 !important;   /* ← これで 3 rem の押し出しを解消      */
    justify-content:center;     /* space‑between → 中央寄せに変更       */
  }

  /* 3) メニュー項目の間隔は ul.menu の gap で調整 */

}


/* === ① ベース：常に存在するが透明なオーバーレイ ================= */
/* === オーバーレイ（常駐・普段は不可視） ================ */

body::before{
  content:"";
  position:fixed; inset:0;
  background:rgba(0,0,0,.7);      /* ←濃さはお好みで */
  z-index:1400;                    /* メガメニュー(1500) の１つ下に */
  opacity:0; pointer-events:none;  /* デフォルトはクリックを通す */
  transition: opacity .2s;
}

/* mobile submenu override rules moved to unified block at end of file */
@media (max-width:768px){
  .nav{
      overflow-y:auto;                 /* 慣性スクロール */
      -webkit-overflow-scrolling:touch;
  }
}

#topImg {
  width:300px;
  height:300px;
}
.top_image{
  text-align:center;
  margin: 3rem;
  display:flex;
  justify-content: center;
  align-items: center;
}

.bg-white.top_char{
  background:linear-gradient(to top, rgba(217, 175, 217, 1) 0%, rgba(151, 217, 225, 1) 80%);
  background-size: contain;
  background-repeat:  no-repeat; 
  background-position: right;
  border:1px white solid;
  border-radius: 3.2rem;
  color:white;
  margin-top: 1rem;
  text-shadow: 0px 0px 5px grey;
  box-shadow: rgba(149, 157, 165, 0.4) 2px 10px 24px;
  width: 90%;
  max-width: 750px;
  display: flex;
  justify-content: center;
  padding: 2rem;
}
.top_des{
  font-size: 1.2em;
  padding:3rem 1rem;
  margin:2rem;
  margin-left:0;
  line-height:2.2;
  white-space: normal;
}
img.top_img{
  clip-path: rect(5px 100% 100% 5px round 5%);
}
p.top{
  font-size: 0.9em;
}
img.title_logo{
  max-width: 100%;
}
div#back {
  display:none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
@media (max-width: 768px) {
  #movie2{
      opacity: 0;
      pointer-events: none;
  }
  div#back {
          display:none;
  }

.bg-white.top_char {
  flex-direction: column;
  align-items: center;
  padding: 1rem 1rem;
}

.top_des {
  font-size: 1em;
  padding: 0;
  margin-left: 0;
  padding-left: 0;
  text-align: center;
  white-space: normal;
  margin:0;
  margin-bottom:2rem;
}

.top_img {
  width: 80%;
  height: auto;
  margin: auto;
}

.charactor_comp_desc2 {
  width: 100%;
  height: auto;
}

.custom-button {
  font-size: 1em;
  padding: 0.9em 1.8em;
  margin: 1rem;
}
.wrap{
  margin-bottom:0px;
}
.top_image{
  text-align:center;
  margin:3rem 1rem 2.5rem 1rem;
}
#topImg {
  width:210px;
  height:210px;
}

p.top{
  font-size: 0.8em;
  line-height: 2;
}
}

.news-bar-wrapper {

  background-color: #666;
  color: #fff;
  padding: 12px 20px;
  font-size: 1.5rem;
  border-radius:2.5rem;
  position: relative;
  overflow: hidden;
  height: 50px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  width:100%;
  max-width:800px;
  border: 1rem solid hsla(0, 0.40%, 44.50%, 0.50);
  background-clip: padding-box;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.news-bar {
position: absolute;
animation: fadeInOut 8s infinite;
transition: opacity 1s ease-in-out;
}

.news-item {
opacity: 0;
position: absolute;
transition: opacity 1s ease-in-out;
}

.news-item.active {
opacity: 1;
}

.news-date {
font-weight: bold;
margin-right: 10px;
color: #ccc;
}

@keyframes fadeInOut {
0%, 20% { opacity: 1; }
40%, 100% { opacity: 0; }
}
/* ===== Owl 全体をページ中央に ===== */
.owl-carousel{
display:block;
margin:0 auto;        /* 左右 auto で中央寄せ */
}

/* ===== スライド中身を中央に ===== */
.owl-carousel .owl-item{
display:flex;         /* 中身を flex‑box に */
justify-content:center;
}

/* （任意）アイテムの最大幅を制限して揃える */
#customers-testimonials  .item,
#customers-testimonials2 .item{
max-width:280px;      /* 好きな値に調整 */
width:100%;
height:auto;
}


  /* オーバーレイのベース */
  @media (min-width:769px){

    .mega-overlay{
      position:fixed; inset:0;
      background:rgba(0,0,0,.35);
      z-index:1400;
      opacity:0; pointer-events:none;
      transition:opacity .2s;
    }
    .mega-overlay.show{
      opacity:1; pointer-events:auto;
    }

  }


  .share-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
    flex-wrap: wrap;
  }
  
  .share-button {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 0.95rem;
  }
  .share-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2rem 0;
  }
  
  .share-button {
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
  }
  
  .share-button.twitter {
    background-color: #000;
  }
  
  .share-button.facebook {
    background-color: #3b5998;
  }
  
  .share-button.line {
    background-color: #00c300;
  }
  
  .share-button:hover {
    opacity: 0.9;
  }

  .panel-container {
    position: relative;
    width: 100%;
    max-width: 450px;
    overflow: hidden;
    border:1px white solid;
    border-radius: 2rem;
  }

  .mobile-br{
    display: none;
  }
  
  .panel-wrapper {
    display: flex;
    transition: transform 0.4s ease;
  }
  
  .panel {
    min-width: 100%;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
  }
  
  .panel-dots {
    text-align: center;
    margin-top: 10px;
  }
  
  .panel-dot {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin: 5px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
  }
  
  .panel-dot.active {
    background-color: #333;
  }

  .function-block{
    margin: 1rem;
    display:inline-block; 
    text-align:center;
  }

  @media (max-width: 768px) {
    .panel-container {
  
      border-radius: 0;
      border:none;
      border-top:1px white solid;
      border-bottom:1px white solid;
      margin-top:2rem;
      height:520px;
      padding:2rem 0;
      
    }
    .mobile-br{
      display: block;
    }
  
    .function-block{
      margin: 0.5em;
    }
  }
  @media (max-width: 450px) {
    .panel-container {
      max-width: 380px;
      /* height:800px; */
      padding:2rem 0;
  
    }
    /* .panel {
      height: 750px;
    } */
    .panel-dots {
      margin-top: 0;
    }
    .function-block{
      margin: 0.1em;
    }
  }

  @media (min-width: 769px) {
    .panel-container {
      height:550px;
      padding:1rem 1.5rem;
      padding-top:4rem;
    }

  }

  .minilink {
    color:black;
  }
  .minilink:hover {
    color:#16426c;
    text-decoration: underline;
  }
/* 
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }
  
  /* コンテンツが隠れないようにヘッダー分の高さを補う */
    /* body::before {
    content: "";
    display: block;
    height: 200px;
  }
  .header.scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  } */

   .seed-container {
            background: white;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .seed-main-title {
            color: #2c3e50;
            text-align: center;
            font-size: 2em;
            margin-bottom: 10px;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        
        .seed-subtitle {
            text-align: center;
            color: #666;
            font-size: 1.1em;
            margin-bottom: 30px;
        }
        
        .seed-section-title {
            color: #2c3e50;
            font-size: 1.4em;
            margin-top: 30px;
            margin-bottom: 15px;
            border-left: 4px solid #3498db;
            padding-left: 15px;
        }
        
        .seed-sub-title {
            color: #34495e;
            font-size: 1.1em;
            margin-top: 20px;
            margin-bottom: 10px;
        }
        
        .seed-highlight {
            background: #e8f4f8;
            padding: 2px 6px;
            border-radius: 3px;
            font-weight: bold;
        }
        
        .seed-example-box {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            margin: 15px 0;
        }
        
        .seed-example-title {
            color: #1a3c6e;
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 1em;
        }
        
        .seed-list {
            margin: 10px 0;
            padding-left: 20px;
        }
        
        .seed-list-item {
            margin-bottom: 5px;
        }
        
        .seed-summary {
            background: #e8f4f8;
            padding: 20px;
            border-radius: 5px;
            margin-top: 30px;
            border-left: 4px solid #3498db;
        }
        
        .seed-summary-title {
            color: #2c3e50;
            margin-top: 0;
        }

/* ===== タイプメニュー: モバイル=リンク / PC=サブメニュー ===== */
/* デフォルト: モバイル用リンクを表示、PCサブメニューを非表示 */
.desktop-type-submenu { display: none; }
.mobile-type-link { display: list-item; }

@media (min-width: 769px) {
  .desktop-type-submenu { display: list-item; }
  .mobile-type-link { display: none; }
}

/* ─── Visual Emphasis: marker & underline ─── */
.description .em-marker {
  background: linear-gradient(transparent 60%, #fff3b0 60%);
  padding: 0 2px;
  border-radius: 2px;
}
.description .em-underline {
  text-decoration: underline;
  text-decoration-color: #1a3c6e;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.description .em-underline-gold {
  text-decoration: underline;
  text-decoration-color: #b8943f;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.description strong {
  font-weight: 700;
  color: #1a3c6e;
}

/* old mobile submenu override removed — unified block below */

/* =============================================
   MOBILE SUBMENU — single source of truth
   ============================================= */
@media (max-width:960px){
  /* Menu layout: force vertical */
  .menu{
    flex-direction:column;
    align-items:stretch;
  }
  .has-submenu{
    position:static;
    flex-direction:column;
  }
  /* Reset all submenus to static/accordion */
  .submenu,
  .submenu.type-grid,
  .submenu.mega-menu{
    position:static;
    display:block;
    width:100%;
    max-height:0;
    overflow:hidden;
    background:#fafafa;
    box-shadow:none;
    border:none;
    border-top:1px solid #f0f1f3;
    border-radius:0;
    padding:0;
    margin:0;
    opacity:1;
    pointer-events:auto;
    transform:none;
    columns:unset;
    transition:max-height .25s ease;
  }

  /* Open when checkbox is checked */
  .submenu-toggle:checked + .submenu{
    max-height:3000px;
    overflow:visible;
  }

  /* Disable hover-based opening */
  .menu > li:hover > .submenu,
  .menu > li:focus-within > .submenu,
  .has-submenu:hover > .submenu,
  .has-submenu:focus-within > .submenu{
    max-height:0;
    overflow:hidden;
  }
  /* But keep it open if checkbox is checked even on hover */
  .has-submenu:hover > .submenu-toggle:checked + .submenu,
  .has-submenu:hover > .submenu-toggle:checked ~ .submenu{
    max-height:3000px;
    overflow:visible;
  }

  /* Submenu links */
  .submenu a{
    font-size:15px;
    padding:14px 32px 14px 48px;
    color:#475569;
    display:flex;
    align-items:center;
    white-space:normal;
  }
  .submenu a:hover{
    background:#f1f3f7;
    color:#1e293b;
  }

  /* Submenu label (accordion trigger) */
  .submenu-label,
  label.submenu-label,
  label.submenu-label.menu_link{
    display:flex;
    width:100%;
    padding:15px 32px;
    font-size:15px;
    color:#1e293b;
    justify-content:space-between;
    box-sizing:border-box;
    cursor:pointer;
  }
  .submenu-label::after{
    content:'';
    width:7px;height:7px;
    border-right:1.5px solid #94a3b8;
    border-bottom:1.5px solid #94a3b8;
    transform:rotate(45deg);
    transition:transform .2s ease;
    flex-shrink:0;
    margin-left:8px;
  }
  .submenu-toggle:checked ~ .submenu-label::after,
  .has-submenu:has(.submenu-toggle:checked) .submenu-label::after{
    transform:rotate(-135deg);
  }

  /* Type grid / mega menu specific resets */
  .submenu.type-grid,
  .submenu.mega-menu{
    columns:unset;
    column-count:unset;
  }
  .submenu.mega-menu a,
  .submenu.mega-menu span,
  .submenu.type-grid span{
    color:#333;
  }
  .menu-qcol-type span{
    color:#333;
  }
  .menu-qcol-type:hover{
    background:rgba(0,0,0,.06);
  }
}

/* ===== 「理論を学ぶ」グループ化サブメニュー ===== */
@media (min-width:961px){
  .submenu.submenu-grouped{
    display:grid;
    grid-template-columns:repeat(4,minmax(180px,1fr));
    gap:0;
    padding:1.5rem 1.5rem;
    background:linear-gradient(180deg,#1f1f23 0%,#18181b 100%);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.18);
    width:max-content;
    max-width:92vw;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .18s ease, transform .22s cubic-bezier(.2,.7,.3,1), visibility 0s linear .22s;
  }
  .has-submenu input.submenu-toggle:checked + .submenu.submenu-grouped,
  .menu > li:hover > .submenu.submenu-grouped,
  .menu > li:focus-within > .submenu.submenu-grouped{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition:opacity .2s ease, transform .22s cubic-bezier(.2,.7,.3,1);
  }
  .submenu-grouped .submenu-group{
    padding:0 1.25rem;
    border-right:1px solid rgba(255,255,255,0.06);
    align-self:stretch;
    min-width:0;
  }
  .submenu-grouped .submenu-group:first-child{ padding-left:.5rem; }
  .submenu-grouped .submenu-group:last-child{
    padding-right:.5rem;
    border-right:none;
  }
  .submenu-grouped .submenu-group--wide{
    grid-column:span 2;
  }
  .submenu-grouped .submenu-group--wide .submenu-group-list{
    column-count:2;
    column-gap:1.5rem;
    column-fill:balance;
  }
  .submenu-grouped .submenu-group--wide .submenu-group-list > li{
    break-inside:avoid;
  }
  .submenu-grouped .submenu-group-title{
    margin:0 0 .6rem 0;
    padding:0 .25rem .55rem;
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#9aa3b2;
    line-height:1.3;
    min-height:24px;
    display:flex;
    align-items:center;
  }
  .submenu-grouped .submenu-group-title::before{
    content:"";
    display:inline-block;
    width:14px;
    height:2px;
    background:linear-gradient(90deg,#6366f1,#a78bfa);
    border-radius:2px;
    margin-right:8px;
    flex-shrink:0;
  }
  .submenu-grouped .submenu-group-list{
    list-style:none;
    margin:0;
    padding:0;
  }
  .submenu-grouped .submenu-group-list > li{
    margin:0;
    padding:0;
  }
  .submenu-grouped .submenu-group-list a{
    position:relative;
    display:block;
    padding:7px 10px 7px 14px;
    font-size:13px;
    line-height:1.5;
    font-weight:500;
    color:#e5e7eb;
    border-radius:6px;
    text-decoration:none;
    white-space:nowrap;
    transition:color .15s ease, background .15s ease, transform .18s ease;
  }
  .submenu-grouped .submenu-group-list a::before{
    content:"";
    position:absolute;
    left:4px;
    top:50%;
    width:2px;
    height:0;
    background:linear-gradient(180deg,#818cf8,#c084fc);
    border-radius:2px;
    transform:translateY(-50%);
    transition:height .18s ease;
  }
  .submenu-grouped .submenu-group-list a:hover{
    color:#fff;
    background:rgba(255,255,255,0.04);
    transform:translateX(2px);
  }
  .submenu-grouped .submenu-group-list a:hover::before{
    height:60%;
  }
}

@media (max-width:960px){
  .submenu.submenu-grouped{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
  }
  .submenu-grouped .submenu-group{
    padding:8px 0 12px;
  }
  .submenu-grouped .submenu-group + .submenu-group{
    border-top:1px solid #f0f1f3;
  }
  .submenu-grouped .submenu-group-title{
    margin:0;
    padding:14px 32px 6px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#64748b;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .submenu-grouped .submenu-group-title::before{
    content:"";
    width:14px;
    height:2px;
    background:linear-gradient(90deg,#6366f1,#a78bfa);
    border-radius:2px;
  }
  .submenu-grouped .submenu-group-list{
    list-style:none;
    margin:0;
    padding:0;
  }
  .submenu-grouped .submenu-group-list a{
    display:flex;
    align-items:center;
    padding:11px 32px 11px 44px;
    color:#1e293b;
    font-size:14px;
    font-weight:500;
  }
}