/* *,*::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 {
    width: 100%;
    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
}
.wrap {
    width:100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin: 5rem auto;
    margin-bottom: 40px;
}
.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;
}
.bg-white.top2 {
  width: 100%;
  max-width: 1000px;
  padding: 2rem;
}


.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;
}
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;
}
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: 2rem;
    padding: 2rem 4rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(270deg, #3bade3 0%, #576fe6 25%, #9844b7 51%, #ff357f 100%);
    background-position: 1% 50%;
    background-size: 200% auto;
    border-radius: 4rem;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease; 
    white-space: nowrap;
    will-change: transform;
    transform: translateZ(0);
  }
  
  /* ホバー時のエフェクト */
  .custom-button:hover {
    background-position: 99% 50%;
    /* transform: scale(1.05); */
    box-shadow: 0 15px 15px rgba(87,111,230,0.4);
  }

  
  /* アクティブ時（クリック中）のスタイル */
  .custom-button:active {
    /* transform: translateY(1px);  */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .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: linear-gradient(270deg, #3bade3 0%, #576fe6 25%, #9844b7 51%, #ff357f 100%);
    background-position: 1% 50%;
    background-size: 200% auto;
    color: white; /* テキストの色 */
    padding: 1rem 4rem;
    font-size: 1.8rem;
    font-weight: 600; /* フォントの太さ */
    border: none; /* ボーダーを消す */
    border-radius: 2.5rem;
    cursor: pointer; /* カーソルをポインターに変更 */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* 軽い影を追加 */
    transition: all 0.3s 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-position: 99% 50%;
    /* transform: scale(1.05); */
    box-shadow: 0 15px 15px rgba(87,111,230,0.4);
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3); /* シャドウを強調 */
  }
  
  /* アクティブ時（クリック中）のエフェクト */
  .custom-submit:active {
    transform: translateY(1px); /* 押し込まれるような効果 */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* シャドウを縮小 */
  }

.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: 450px;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
img.charactor_comp_desc {
  width:50%;
  max-width: 500px;
  margin: 0 auto;
  clip-path: rect(5px 100% 100% 5px round 5%);
}
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;
}
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: 350px;
  /* 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:2rem;
  text-align: center;
  font-size:2.5rem;
}
#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:142px;
  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{
  /* ❶ デスクトップでは 400 px を上限に */
  max-width:300px;

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

  margin-right:5rem;
  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:black;
  }
  .menu_link_list a:hover{
    color:black;
    text-decoration: underline;
  }
@media (max-width:768px){
  .title_logo{ margin-right:4rem;}
  .menu_link_list a{
    color:white;
  }
}

/* 基本スタイル */
.header {
  padding-top:1rem;
  display: flex;
  justify-content: center;
  flex-direction: row;
  background:#fff;
  border-bottom:1px solid #ccc;
  align-items: center;
  margin: 0;
}
@media (max-width:768px){
  .header {
    padding-top:2.8rem;
    padding-bottom:2.5rem;
  }
  .mega-menu li {
    padding-top:1.4rem;
    padding-left:5rem;
    padding-bottom:1.4rem;
  }
}

.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;
}

.menu li {
  white-space: nowrap;
}

.menu a {
  text-decoration: none;
  padding: 1rem 2rem;
}


/* サブメニュー */
.submenu {
  list-style: none;
  padding: 5px 4px;
  border-radius: 5px;
  margin: 0;
  position: absolute; /* 親メニューの下に表示 */
  top: calc(100% + 1px);
  left: 0;
  background-color: #333;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  display: none; /* 初期状態では非表示 */
  z-index:5;
}

.submenu li {
  margin-bottom: .5em; 
  white-space:nowrap;
}

.submenu a {
   color:#fff;
   padding:1.2em 0.3em;
}
/* サブメニューのトグル */
.submenu-toggle {
  display:none;
}

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

/* ===== ハンバーガー開閉アニメーション ===== */
.hamburger {
  display:none;            /* ←モバイルでも少し横幅を確保      */
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px; height:36px;
  padding:6px;
  transition:.3s;
}
.hamburger span{
  width:100%; height:3px;
  background:#333;
  transition: transform .3s, opacity .3s;
}

/* ─ 変形（開⇄閉） ─ */
#menu-toggle:checked + .hamburger span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
#menu-toggle:checked + .hamburger span:nth-child(2){
  opacity:0;
}
#menu-toggle:checked + .hamburger span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}
/* ===== オーバーレイ（フェード背景） ===== */
.menu-overlay{
  display:none;                /* デフォルト非表示 */
}
#menu-toggle:checked ~ .menu-overlay{
  display:block;
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);   /* 透過ブラック */
  backdrop-filter:blur(2px);
  z-index:8;                   /* .nav(=10) より下、ハンバーガーより上 */
}

/* ===== “×” 閉じるボタン（メニュー内上部） ===== */
.close-btn{
  display:none;                /* デスクトップでは不要 */
}
/* ===== モバイルメニューのスライド表示 ===== */
@media (max-width:768px){
   /* 初期状態：右にオフセット */
   .nav{
    display:flex!important;      /* ←旧 rule の display:none を打ち消す */
    flex-direction:column;
    position:fixed; top:0; right:-100%;
    width:80%; max-width:320px; height:100vh;
    padding-top:6rem;
    background:#333;
    transition:right .35s ease;
    overflow-y:auto;
    justify-content:stretch;
    z-index:10;                  /* オーバーレイより上 */
  }

  /* ===== ハンバーガー開閉アニメーション ===== */
  .hamburger {
    display:inline-flex;            /* ←モバイルでも少し横幅を確保      */
  }
  /* ★ 開くとスライドイン ( + → ~ ) */
  #menu-toggle:checked ~ .nav{
    right:0;
  }

  /* ハンバーガー変形も同様に + → ~ */
  #menu-toggle:checked ~ .hamburger span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }
  #menu-toggle:checked ~ .hamburger span:nth-child(2){
    opacity:0;
  }
  #menu-toggle:checked ~ .hamburger span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }
  /* 背景スクロール禁止（:has は Safari／Chrome 2024〜） */
  body:has(#menu-toggle:checked){
    overflow:hidden;
  }
  /* オーバーレイ表示 ( + → ~ ) */
  #menu-toggle:checked ~ .menu-overlay{
    display:block;
  }
  /* メニュー項目のレイアウト調整 */
  ul.menu{
    flex-direction: column;
    align-items: stretch;
  }
  @media (max-width: 768px) {
    ul.menu{
      width:100%;
      padding-bottom:5rem;
    }
  }
  
  .menu a{
    display:block;
    padding:1.2rem 2rem;
    color:#fff;
  }
  
  .submenu{
    position:static;   /* ドロップではなくアコーディオン型に         */
    background:none;
    box-shadow:none;
    padding-left:1rem;
  }

  .submenu a{
    padding:.8rem 1rem;
  }
  /* サブメニューのアコーディオン開閉 */
  .submenu-toggle + .submenu{
    max-height:0;
    overflow:hidden;
    /* transition:max-height .3s ease; */
  }
  .submenu-toggle:checked + .submenu{
    max-height:500px;  /* 十分に大きい値なら OK                        */
  }
  .close-btn{
    display:block;
    align-self:flex-end;
    font-size:2.4rem;
    line-height:1;
    padding:.5rem 1rem 1.2rem;
    color:#fff;
    cursor:pointer;
  }
  .submenu-label,
  .submenu a{
    color:#fff !important;   /* 強制的に白文字 */
  }
}

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

.submenu-label{
  font-weight: 600;
}

/* 基本スタイル */
.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: 960px){       /* ← PC とみなす幅 */

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

  /* ③ サブメニュー＝メガメニュー本体 ------------------ */
  .submenu{
    /* レイヤー */
    position: absolute;
    left: 60vw;
    top: 90px;            /* 親 li の真下 */
    background:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    border-top:2px solid #169;
    z-index:999;
    width: max-content;

    /* レイアウト */
    display:none;                /* デフォルト非表示 */
    padding:1rem;
    box-sizing:border-box;
    column-count:1;              /* 4 列組み（アイテム数で自動折返し） */
    column-gap:3rem;
  }

  /* ③ サブメニュー＝メガメニュー本体 ------------------ */
  .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;
    column-count:4;              /* 4 列組み（アイテム数で自動折返し） */
    column-gap:3rem;

    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 a{
  display:flex;                 /* 画像＋テキストを横並び */
  align-items:center;
  gap:.8rem;
  padding:.6rem 1rem;
  border-radius:8px;
  color:#333;                   /* ←★白地に読みやすい色 */
  text-decoration:none;
  /* transition:background .25s, color .25s; */
}


/* アイコン丸抜き */
.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;
        
          /* グリッド：1カード=160px～で自動折り返し */
          display:grid;
          grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
          gap:1.2rem 1.6rem;
        
          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;}
        @media (max-width: 600px){
          .submenu.type-grid{
            grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
            padding:1rem;
          }
        }

        /* ============ TOP ナビ全体 ============ */
.menu{display:flex; align-items:center; padding:0; margin:0; list-style:none;}
.menu a{ text-decoration:none; font-weight:600;}

/* ============ ▼▼ 16タイプ・グリッド ▼▼ ============ */
.submenu.type-grid{
  position:absolute;             /* ドロップダウンにする   */
  left:50%; transform:translateX(-50%);
  top:100%;                      /* 親 li の下端に揃える   */
  width:90vw; max-width:900px;
  background:#222; border-radius:0 0 1rem 1rem;
  padding:1.5rem 2rem; box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.2rem 1.6rem;

  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 で表示 ─ */
@media (hover:hover){
  .has-submenu:hover  > .submenu,
  .has-submenu:focus-within > .submenu{
    visibility:visible; opacity:1;
  }
}
/* ─ モバイル：チェックボックス連動 (既存 JS) ─ */
.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;
}
.submenu.type-grid span{
  color:#fff; font-size:.9rem; white-space:nowrap;
}

/* ============ 600px 未満の簡易調整 ============ */
@media (max-width:600px){
  .submenu.type-grid{
    transform:none;   /* サイドメニュー内に埋め込む */
    width:100%; max-width:none;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    padding:1rem;
    box-shadow:none;
  }
}

/* 2) サブメニュー (= ダーク背景内) は白のまま */
.submenu a,
.submenu span{
  color:#fff;
}

/* 3) サイドメニュー化するモバイル幅では
      .nav が濃い背景になるので再度白文字に */
@media (max-width:768px){
  .nav a{color:#fff;}
}
/*============================
  1) サブメニュー背景をすべて統一
============================*/
.submenu,
.submenu.type-grid{
  background:#222 !important;   /* ここで1色に統一 */
}

/* 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:#fff;}
}
/* ───────── 追加または既存 .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;}
}
/* メニュー下層は全部同じ色に */
.submenu,
.submenu.type-grid{
  background:#222 !important;  /* どこでも #222 */
}

/* ========= 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){
  .submenu.mega-menu{                     /* ← ❶ 追加したクラスで限定 */
    position:absolute;                       /* 画面 (viewport) 基準に固定 */
    right:0;                              /* 同じく右端まで */
    top:calc(var(--header-h,80px));       /* ヘッダー高さ分だけ下げる */

    width:100vw;                          /* 100% ではなく 100vw が安全 */
    max-width:none;                       /* 既存の max‑width を無効化 */

    /* Samsung 風にゆったりした余白 */
    padding:4rem clamp(48px, 8vw, 120px); /* 左右とも 48‑120px の間で変動 */
    box-sizing:border-box;

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

    /* ===== レイアウト ===== */
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:2.8rem 3.2rem;

    /* 画面高を超えたら中だけスクロール */
    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;}

/* --- ダーク背景上なので文字は白固定 --- */
.submenu.mega-menu a,
.submenu.mega-menu span{color:#fff;}
/* ファイルいちばん下の .submenu.mega-menu に追記 */
.submenu.mega-menu{
  overflow-y:scroll;          /* ← 常にスクロールバーを確保 */
  scrollbar-gutter:stable;    /* ← 未対応ブラウザでもズレ最小 */
}
.submenu.mega-menu{
  scrollbar-width:thin;           /* Firefox */
}
.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;
}

.menu_link,
.menu_link2 {
  display: inline-block;
  padding:3.5rem 1.5rem;
  color:#111;
  cursor: pointer;
  max-height:120px;
  box-sizing: border-box;
  border-bottom:#fff 2px solid;
}

.icon_link {
  padding:0rem 2rem;
  cursor: pointer;
}
@media (max-width:768px) {

  .header-type-icon{
    margin-top:5rem;
  }
}

.menu_link:hover {
  border-bottom:#000 2px solid;
  color:#111;
}
.menu_link2:hover {
  color:#111;
}
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;
}

/* ▼ モバイル専用 – 既存の @media (max-width:768px) の最後に入れると安全 */
@media (max-width:768px){

  /* side‑menu 内では mega‑menu の “PC 用” ルールを無効化 */
  .submenu.mega-menu{
    position: static !important;
    width: 100% !important;
    padding: 1.8rem 0 !important;
    overflow: visible !important;
    max-height: none !important;
    box-shadow: none !important;
  }

  /* グリッド → 縦 1 列に */
  .submenu.type-grid{
    display: none !important;
    padding: .5rem 0 1rem;
  }

  /* 各カードを横並びにしつつ、テキストを折り返し可に */
  /* .submenu.type-grid li{width:100%;} */
  .submenu.type-grid a{
    display:flex;
    align-items:center;
    gap:1rem;
    padding: .8rem 1.2rem;
    white-space:normal;                  /* ← nowrap を解除 */
    flex-wrap:wrap;
    width:auto;
  }
  .submenu.type-grid img.face{
    flex:0 0 48px;
    height:48px;
  }
  .submenu.type-grid span{
    font-size:1.5rem;                    /* 読みやすい大きさ */
    line-height:1.4;
  }

  /* スライドアコーディオン用の開閉アニメ（任意） */
  .submenu-toggle + .submenu{
    max-height:0;
    display:none;
    /* transition:max-height .3s ease; */
  }
  .submenu-toggle:checked + .submenu{
    display: block !important;
  }

  /* サイドバーを全幅にしたい場合だけ */
  /* .nav{width:100%; max-width:none;} */
}
@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;
}
@media (max-width: 768px) {
  #movie2{
      display:none;
  }
  div#back {
          display:block;
          background-color:hsla(0,100%,50%,1);
          background-image:
          radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
          radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
          radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
          radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
          radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
          radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
          radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);
          background-size: cover;
          position:fixed;
          top:0;
          left:0;
          width:100vw;
          height:100vh;
          z-index: -3;
  }

.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: 1em 1.5em;
}
.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: #1DA1F2;
  }
  
  .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: #495057;
            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;
        }