/*CSS*/

body{
  text-align: center;
  font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴシック','ＭＳ Ｐゴシック',sans-serif;
  /*color: #000000; /* 標準文字色 */
  /* background-image : url(header.png);  */
  background-position: top left;
  background-repeat: repeat-x;
  background-size: auto;
  background-color: #FAFCFC;/* #FDFEFE / #FBFCFC /*/
  -webkit-text-size-adjust: 100%; /* Safari用ハック 文字サイズ調整 */
}

#header {
    position: fixed;
    width: 100%; /* Make them span the full width of the screen */
    top: 0;      /* Align them to the top of the viewport */
    left: 0;     /* Align them to the left of the viewport */
    z-index: 1000; /* Ensure they appear above other content */
    background-color: #FAFCFC; /* Add a background color to prevent content from showing through */
    padding: 10px 0; /* Add some padding for spacing */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for separation */
}
#header h1{ /*ヘッダーの設定*/
 margin: 5px 0 10px 0; 
 text-align: center;
 font-weight: bold;
 font-size: 1.4em;
 letter-spacing: 3px; 
}

#header nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
  gap: 1.5em;
}

button {
  position: relative;
  padding: 0.5em 1em;
  text-decoration: none;
  color: black;
  background: #E8F9F9;/*色#ccccff*/
  border: solid 1px #0000cc;/*線色*/
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  font-size: 0.95em;
  cursor: pointer;
  display: inline-block;
  margin: 0.5em 1em 0.5em 1em; /* ボタン間のスペース */
  min-height: 2.3em;
  white-space: normal; /* 自動で高さを拡張 */
}

button:hover {
  background: #99FF99;
}

button:active {
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px #0033cc;
  background-image: linear-gradient(#99FF99 0%, #1ab70f 100%);/*グラデーションを明るく*/
}

a:link, a:visited{
  color: blue;
  text-decoration: underline 0.5px;
  text-underline-offset: 3px;
}
a:hover{
  color: skyblue;
  text-decoration: underline;
}

a.small{
	font-size: 0.85em;
}


p{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 0.50em;
  padding-right: 0.5em;
  line-height: 1.5;
  text-align: left;
  font-size: 1.0em;
}

p.note { /*コメント用*/
  margin-top: 0.7em;
  margin-bottom: 1.5em;
  padding-left: 1.0em;
  padding-right: 0.5em;
  line-height: 1.5;
  text-align: left;
  font-size: 0.9em;
}

p.small {  /*注釈用*/
  margin-top: 0.7em;
  margin-bottom: 0;
  padding-left: 1.0em;
  padding-right: 0.5em;
  line-height: 1.1;
  text-align: center;
  font-size: 0.8em;
}

p.center{
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  line-height: 1.5;
  font-size: 1.1em;
  text-align: center;
}

p.clr{ /*テキストクリアボタンの表示。右配置*/
  font-size: 0.9em;
  text-align: right;
  margin: -1em 3em -1em 0;
}


p.msg { /*エラーメッセージ用*/
	color:red;
  margin-top: 1.5em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  line-height: 1.5;
  font-size: 1.0em;
  text-align: left;
}

h2 {
  color: black;
  background-color: #ddedfd;
  padding: 5px 0 5px 0;
  text-align: center;
  vertical-align: center;
  letter-spacing: 0.1em;
  border-top: 1.5px solid #0077cc;
  border-bottom: 1.5px solid #0077cc;/*#000099*/
  margin: 1.2em 0;
  font-size: 1.05em;
  /* font-family: "arial black"; */
}

h5 { 
  font-size: 1.05em;
  font-weight: bolder;
  text-align: left;
  margin-bottom: 0;
}

h5::before {
  content: "■"; /* 独自のマーカーを追加 */
  color: navy; /* マーカーの色を設定 */
  display: inline-block; /* マーカーをインライン要素として表示 */
  padding-right: 0.3em; /* マーカーとテキストの間にスペースを追加*/
  font-size: 1.2em; /* マーカーのサイズを設定 */
}

ul.res, ul.res-read { /*診断結果出力用*/
  list-style-type: none;
	background-color: white;
  margin: 1em 0 1em 0; /*上1下1*/
  padding: 1.5em 0.5em 1.5em 2.5em; /*上下1.0、右が0.5em、左2.5*/
  line-height: 1.5;
  font-size: 1.0em;
  font-weight: bolder;
  text-align: left;
  border: 0.1px solid navy; /* #0066ff #ccccff */
}

ul.res-read{
  line-height: 1.1;
  font-size: 0.95em;
  font-weight: normal;
  background-color: #FAFCFC;
}

ul.res li::before, ul.res-read li::before{
  content: "■"; /* 独自のマーカーを追加 */
  color: navy; /* マーカーの色を設定 */
  display: inline-block; /* マーカーをインライン要素として表示 */
  padding-right: 0.3em; /* マーカーとテキストの間にスペースを追加*/
  font-size: 1.2em; /* マーカーのサイズを設定 */
}

ul.res li {
  line-height: 1.5;
  margin-bottom: 1.5rem;
	text-indent: -1em;
}

ul.res img {
  max-height: 5.5rem;
  vertical-align: middle;
  /* border: 1px solid #0000cc; */
  border: 1px solid #d8d7d7;
  margin-left: 0.5rem;
  /* margin-top: 0.5rem; */
  box-shadow: 2px 2px #d8d7d7;
}

ul.res span.text1 {
  font-size: 0.80em;
  margin-left: 0.5em;
}

ul.inputdat { /*確認画面表示用*/
  list-style-type: none;
  margin: 1.5em 0 0 0; 
  padding: 1em 0.5em 0.5em 2.5em; /*上下1.0、右が0.5em、左2.5*/
  line-height: 1.5;
  font-size: 1.0em;
  text-align: left;
  border: 1px solid #0000cc;/*#0066ff #ccccff*/
}

ul.inputdat li {
  line-height: 1.3;
  margin-bottom: 0.5em;
	text-indent: -1em;
}

ol.small {
  margin:0.1em -0.5em;
}
ol.small li {
  font-size: 0.8em;
  text-align: left;
}

footer {
  margin: 4.0em 0;
  font-size: 1.0em;
  text-align: center;
  width: 100%;
  border-top: 1px solid #B5BDBC;
  padding-top: 1.5em;
}

footer a:link, 
footer a:visited{
  color: black;
  text-decoration: none;
}

footer a:hover{
  color: black;
  text-decoration: underline;
  font-weight: bold;
}


/*無料診断結果のシェアボタン用画像 */
img.share {
  max-width:50px;
  margin:0.2em 1.5em;
}

/*フッター内のシェアボタン用画像 */
img.sharefooter {
  max-width:40px;
  margin:0.5em 1.5em;
}

/*結果画面の見出し内の画像 */
img.title {
  max-width:30px;
  margin-right:0.5em;
  vertical-align: middle;
}

/*Xのリンクコピー説明用画像 */
img.linkcp {
  border: solid 1.5px gray; 
  max-width:100%; 
  vertical-align:middle;
}


/* BOXのスタイル */
.box {
  background-color: white;
  border: 0.1px solid gray;
}

/** こころのコンシェルジェ **/
/* Pair chat */
.readonly { 
  background-color: #ebebeb;
}

/* ラジオボタンを横並びに */
.inline-radio {
  display: inline-flex;
  gap: 2em; 
  list-style: none;
  margin-left: 1em;
}

/* radio-button list */
.radio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;   /*li間隔*/
}
.radio-list label {
  position: relative;
  display: block;
  padding-left: 1.75em;
  line-height: 1.5;
}
.radio-list input[type="radio"] {
  position: absolute;
  left: 0;
  top: 0.2em;                  /* 縦位置の微調整*/
  margin: 0;
  transform: scale(1.05);
}

.btn { display:inline-block; padding:8px 12px; background:#2563eb; color:#fff; text-decoration:none; border-radius:6px; }
.btn-secondary { background:#2563eb; color:#fff !important;}
.btn-cancel { background:#6c757d; color:#fff; padding:8px 12px; border-radius:6px;}
.btn-danger { background:#dc2626; }

.btn-line { display:inline-block; padding:14px 24px; background:#00c300; color:#fff !important; text-decoration:none !important; 
  border-radius:6px; line-height: 1.2;font-size: 1.2em;font-weight: bold; letter-spacing:0.1em}
.btn-line:hover { background: #009900;}

.form-control { padding:8px; width: 320px; max-width: 100%; }
.stack > * { margin-block: 8px; }
.messages { margin-bottom: 12px; }
.messages li { margin: 4px 0; padding: 8px; border-radius: 6px; }
.success { background: #ecfdf5; color:#065f46; }
.warning { background: #fffbeb; color:#92400e; }
.error { background: #fef2f2; color:#991b1b; }
.muted { color:black; font-size: 0.9em; }
.center-form { width: 80%; text-align: center; margin: 0.5em auto 0 auto;}


fieldset { border:1px solid #6b7280; padding:12px; border-radius:8px; margin:0.5em }
legend { padding: 0 6px; font-size: 1.1em;}

table { border-collapse: collapse; width: 100%; table-layout: fixed; background-color:white;
  margin-bottom: 1.5em;
}
th { border: 1px solid #ccc;
   padding: 0.05em 0.25em;
   background-color: #0077cc !important;
   color:white; }
th:first-child { width: 45%; }
td:first-child { width: 50%; }
th.wide:first-child, td.wide:first-child{
  width: 65%;
}
th.thin:first-child {
  width: 35%;
}
td { border: 1px solid #ccc; padding: 0.2rem 0.2rem; }

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.container a,
.container a:link,
.container a:visited,
.container a:hover,
.container a:active {
  text-decoration: none;
  color: inherit;
}

.cardp {
  background: white;
  border-radius: 12px;
  border: #0077cc solid 1px;
  /* box-shadow: 0 2px 8px #0077cc; */
  box-shadow: 0 5px 12px rgba(4, 35, 238, 0.1);
  padding: 0;
  width: 90%;
  margin-bottom: 2rem;
  overflow: hidden; /* 角丸を保つ */
}
.cardp.hover:hover {
  transform: translateY(-5px);
  transition: transform 0.2s;
  cursor: pointer;
}

.cardp-header {
  background-color: #0077cc;
  color: white;
  padding: 5px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin: 0; /* 余白なし！ */
}

.cardp-level {
  margin: 0;
  background-color: #f9f9f9;
  border-bottom: #0077cc solid 1px;
  display: flex;
  width: 100%;
  align-items: center;
}
.cardp-level {
  margin : 0;
  text-align: center;
}
.cardp-level p.lv {
  font-size: 0.95em;
  flex-grow: 6;
  text-align: center;
}
.cardp-level p.date {
  font-size: 0.85em;
  flex-grow: 4; 
}

.cardp-body {
  padding: 0.5rem;
  background-color: #f9f9f9;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.cardp h3 {
  height: 2;
  margin: 0.85em 0.1em;
  color: white;
}
.headerdate {
  font-size: 0.7em;
}

.cardp h4 {
  font-size: 1.05rem;
  color: #333;
  text-decoration: underline 0.5px #0077cc;
  text-underline-offset: 4px;
  line-height: 1.5;
}
.cardp h4.left {
  text-align: left;
  margin-left: 1rem;
}
.cardp p {
  font-size: 1rem;
  /* color: #333; */
}

.cardp ul {
  margin-left: -1.25em;
  list-style-type: square;
  text-align: left;
}
.cardp ul li{
  margin: 0.5em 0;
  margin-right: 0.5em;
}
.cardp ul.circle {
  list-style-type: circle;
}

#relations, #career, #howto {
    scroll-margin-top: 150px; /* Adjust to header height */
}

.test-title {
  font-size: 0.9em;
  font-weight: bold;
  color: #000000;
  margin: 1em 0;
}
.test-result {
  font-size: 0.9em;
  margin-bottom: 0.5em;
  line-height: 1.25;
}

/* level */
.level {
  background-color: #FFFFCC;
  border: #0077cc solid 1px;
  border-radius: 2px;
  margin: 0 0.25em;
  padding:0 0.25em;
  color:#000000;
}

p.list {
  font-size: 0.85em;
  text-align: center;
  padding: 0.01em 0;
}
p.listdate {
  font-size: 0.7em;
  text-align: center;
}
p.listmin {
  font-size: 0.85em;
  text-align: center;
  margin:0;
  font-weight: bold;
}
p.listdatemin {
  font-size: 0.7em;
  text-align: center;
  margin:-0.1em;
}

/*確認modal*/
#confirmModal, #confirmModal2 {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 5;
}
#confirmModal.active, #confirmModal.active {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

#confirmModal .modal-content,
#confirmModal2 .modal-content {
  background: #fff;
  padding: 20px;
  margin: 45% auto;
  width: 300px;
  border-radius: 8px;
  text-align: center;
}

/* 相性診断用 結果*/
.res-container, .reslist-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  margin: -0.5em 0.5em 1em 0.5em;
  text-align: center;
}
.reslist-container {
  margin: 0.05em 0;
}
.res-box, .reslist-box {
  width: 45%;
  height: 2.5em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  background-color: white;
  border: 1px solid #6c757d;
  border-radius: 4px;
  padding: 0.2em;
  display: flex;
  align-items: center; 
  justify-content: center;
}

.reslist-box {
  line-height: 1.2;   /*行間*/
  background-color: none;
  border: none;
}
.res-separator {
  font-weight: bold;
}

/* 実施済み表示アイコン */
.result-label {
  display: inline-block;
  border: 1px solid gray;
  border-radius: 3px;
  background-color: #FFFFCC;
  text-decoration: none;
  font-size: 0.9em;
  margin: 0.2em 0.05em 0.2em 0;
}

/* 診断実施 */
.pair-separator {
  font-size: 2em;     /* 「×」の大きさ */
  line-height: 1;
  user-select: none;
  margin: 0.5em;
}

.compat-select,
.compat-selectR {
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none;    /* Firefox */
  appearance: none;         /* 標準 */

  width: 80%;
  padding: 0.5em 2em 0.5em 0.75em; /* 右に余白を確保 */
  font-size: 1.1em;
  text-align: center;
  text-align-last: center;
  box-sizing: border-box;
  background-color: #fff;
  /* 矢印を背景画像や記号で追加 */
  background-image: none;
  position: relative;
}
.compat-selectR {
  width: 55%;
  font-size: 1.0em;
}

.select-wrapper,
.select-wrapperR {
  position: relative;
  display: inline-block;
  width: 90%;
}
.select-wrapperR {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.select-wrapper::after,
.select-wrapperR::after {
  content: "▼";
  position: absolute;
  right: calc(10% + 0.8em);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #333;
  font-size: 0.9em;
}
.select-wrapperR::after {
  right: calc(35% + 0.5em);
}

/* Checkout画面後メッセージ*/
#message {
  margin:0.5em;
  color:red;
}

/* 問い合わせフォーム */
.charform, .readonly-char {
  color: black;
  padding: 0.5em;
	text-align: left;
  font-size: 1.0em;
  width: 70%; 
  height: 1.2em;
}

.readonly-char {
    background-color: #e0e0e0 !important;
    color: #555 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.textareaform {
  color: black;
  padding: 0.8em;
	text-align: left;
  font-size: 1.2em;
  width: 90%; 
  height: 40%;
}



/****************************************/
/* PC用CSS*/
/****************************************/
main{
 text-align: center;
 width: 700px;
 margin:auto;
 padding-top: 100px; /* ヘッダーの合計高さに合わせて調整 */
}

.main-boxid { /*Box化し、テキストを表示（折返） */
  margin: 0.5em auto 2em auto; /*top0.5,bottom2, left0.5*/
  width: 450px;
  min-height: 70vh; /*footerの位置を70vhに固定するため*/
}

.main-boxtx { /*Box化しテキストを表示 */
  min-height: 75vh; /*footerの位置を75vhに固定するため*/
}

.footer-items {
  display: flex;
  justify-content: center;
  gap: 3em;
}


/****************************************/
/* 900px以下に適用されるCSS（タブレット用） */
/****************************************/
@media screen and (max-width: 900px) {
	main{
	 text-align: center;
	 min-width: 480px;
	 max-width: 600px;
	 margin:auto;
   padding-top: 100px; /* ヘッダーの合計高さに合わせて調整 */
	}

	.main-boxid { /*Box化し、テキストを表示（折返） */
	  margin: 0.5em auto 2em auto; /*top0.5,bottom2, left0.5*/
	  width: 500px;
	  min-height: 70vh; /*footerの位置を70vhに固定するため*/
	}

  .footer-items {
    display: flex;
    justify-content: center;
    gap: 3em;
  }
  
	
}

/****************************************/
/* 480px以下に適用されるCSS（スマホ用） */
/****************************************/
@media screen and (max-width: 480px) {
	main{
	 text-align: center;
	 width:98%;
	 min-width: 320px;
	 margin:auto;
   padding-top: 100px; /* ヘッダーの合計高さに合わせて調整 */
	}

	.main-boxid { /*Box化し、テキストを表示（折返） */
	  margin: 0.5em auto 2em auto; /*top0.5,bottom2, left0.5*/
	  width: 95%;
	  min-height: 70vh; /*footerの位置を70vhに固定するため*/
	}

  .footer-items {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

}


/****************************************/
/* Loading Animation */
/****************************************/

.loading-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* 100vw */
  height: 100vh; /* 100vh */
  background-color: rgba(255, 255, 255, 0.6); /*rgba(0, 0, 0, 0.8)*/
  z-index: 99;
  visibility: hidden;
} 

/* Loading診断中 */
.loader {
  color:#666666;
  font-weight: bold;
  font-size: 1.75rem;
  animation: l1 0.6s linear infinite alternate;
  margin: 45vh auto;
  z-index: 20;
}
.loader:before {
  content:"実行中";
  letter-spacing: 0.3rem; 
}
@keyframes l1 {to{opacity: 0.2}}

/* 図形 */
.loading {
  display: block;
  position: relative; /*abusolete relative*/
  margin: -50vh auto;
  width: 0.5rem; /*100px*/
  height: 0.5rem; /*100px */
}

.loading span {
  display: block;
  position: absolute;
  width: 3rem;
  height: 3rem;
  margin: 1.5rem;
}
.loading span:nth-child(1) {
  top: 0;
  left: 0;
  background-color: rgba(66, 133, 244, 0.7);
  -webkit-animation: move1 3s linear infinite;
          animation: move1 3s linear infinite;
}
.loading span:nth-child(2) {
  top: 0;
  right: 0;
    background-color: rgba(128, 0, 128, 0.5);
  -webkit-animation: move2 3s linear infinite;
          animation: move2 3s linear infinite;
}
.loading span:nth-child(3) {
  bottom: 0;
  left: 0;
  background-color: rgba(244, 180, 0, 0.7);
  -webkit-animation: move3 3s linear infinite;
          animation: move3 3s linear infinite;
}
.loading span:nth-child(4) {
  bottom: 0;
  right: 0;
  background-color: rgba(15, 157, 88, 0.7);
  -webkit-animation: move4 3s linear infinite;
          animation: move4 3s linear infinite;
}

@-webkit-keyframes move1 {
  0% {
    transform: translate(0);
    z-index: 10;
  }
  25% {
    transform: translate(100%, 0);
  }
  50% {
    transform: translate(100%, 100%);
  }
  75% {
    transform: translate(0, 100%);
    z-index: 0;
  }
  100% {
    transform: translate(0);
  }
}

@keyframes move1 {
  0% {
    transform: translate(0);
    z-index: 10;
  }
  25% {
    transform: translate(100%, 0);
  }
  50% {
    transform: translate(100%, 100%);
  }
  75% {
    transform: translate(0, 100%);
    z-index: 0;
  }
  100% {
    transform: translate(0);
  }
}
@-webkit-keyframes move2 {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(0, 100%);
  }
  50% {
    transform: translate(-100%, 100%);
    z-index: 0;
  }
  75% {
    transform: translate(-100%, 0);
    z-index: 10;
  }
  100% {
    transform: translate(0);
  }
}
@keyframes move2 {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(0, 100%);
  }
  50% {
    transform: translate(-100%, 100%);
    z-index: 0;
  }
  75% {
    transform: translate(-100%, 0);
    z-index: 10;
  }
  100% {
    transform: translate(0);
  }
}
@-webkit-keyframes move3 {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(0, -100%);
    z-index: 10;
  }
  50% {
    transform: translate(100%, -100%);
  }
  75% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(0);
    z-index: 0;
  }
}
@keyframes move3 {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(0, -100%);
    z-index: 10;
  }
  50% {
    transform: translate(100%, -100%);
  }
  75% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(0);
    z-index: 0;
  }
}
@-webkit-keyframes move4 {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(-100%, 0);
    z-index: 0;
  }
  50% {
    transform: translate(-100%, -100%);
    z-index: 10;
  }
  75% {
    transform: translate(0, -100%);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes move4 {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(-100%, 0);
    z-index: 0;
  }
  50% {
    transform: translate(-100%, -100%);
    z-index: 10;
  }
  75% {
    transform: translate(0, -100%);
  }
  100% {
    transform: translate(0);
  }
}