@charset "UTF-8";
/*body {
    font-family: sans-serif;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    background-color: #f9f9f9;
}*/
body {
background-color: #fff !important;
}
/**/
.fixed {
  /*position: fixed;*/
 /* position: absolute;*/
 /* width: 1275px;*/
  /*top: 0;
  z-index: 1000;*/
}


.top_visuallineup {
    margin-bottom: 30px;
}

.contents_exiidafit a,
.contents_exiidalogo a  {
    display: block !important;
    padding: 5px;
    text-decoration: none !important;
    color: #0c0c0c;
}

.contents_exiidafit a:hover,
.contents_exiidalogo a:hover{
    text-decoration: none !important;
    opacity: 0.5 !important;
    background-color: #f4f4f4 !important;
} 

.contents_exiidafitLink,
.contents_exiidalogoLink{
    float: left;
    text-align: left;
    float: revert;
    background-color: #fff;
}
.contents_exiidafitLink {
    border: 10px solid #00b5e4;
    margin-bottom:10px;
}
.contents_exiidalogoLink {
    border: 10px solid #00a5a8;
    margin-bottom:10px;
}
.exiida_tit {
	color: #00a5a8;
	font-weight: bold;
	font-size:96%;
	margin-bottom:2px;
}
.exiidafit_tit {
	color: #00b5e4;
	font-size:96%;
	margin-bottom:2px;
	font-weight: bold;
	}
.dots {
  background-image: radial-gradient(circle at center, #00a5a8 20%, transparent 20%); /* 点の色とサイズ調整 */
  background-position: top right; /* 点の位置 */
  background-repeat: repeat-x; /* 横方向に繰り返し */
  background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
  padding-top: .4em; /* 縦方向の位置調整 */
color: #00a5a8;
font-weight: bold;
}


/*Line_SkyBlue*/
.bgskyblue-column_main {
  position: relative;
  inset-inline: 49.4%;
  width: 100vw;
  margin-inline: -50vw;
  background-color: #D9F1F3;
  height: 20px;
}
/*共通基本カラム*/
.red_Border {
    border: 1px solid #CC0000;
    padding: 2px 5px;
    color: #CC0000;
    width: 260px;
    margin-bottom: 15px;
}
.container2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 30px auto 80px;
}
.container2 .item_w600px {
  flex: 0 1 600px;
  position: relative;
}

/*診断枠内*/

.logo_icon{
	 text-align: left;
    margin: 0 0 5px;
} 
.page_w1{
	width: 100%;
    margin: 0 auto;
} 
.page_w2{
	width: 810px;
    margin: 0 auto;
} 
.page_w3{
	width: 566px;
    margin: 0 auto;
} 

	.ui_text_01 {
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .ui_img_01 {
    width: 100%; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

/**/

.view_detailsLink a{
    display: block;
    color: #048296;
    text-align: center;
    padding-top: 5px;
    font-size: 105%;
    text-decoration: none;
    box-sizing: border-box;
}/*
.lp4Top_contentsLink a:hover {
    color: #fff;
    background-color: #00b5e4;
}*/
.view_details {
    position: relative; 
}
.view_details::before{
content: "";
width: 6px;
height: 6px;
border-top: 2px solid #048296;
border-right: 2px solid #048296;
position: absolute;
bottom: -10px; 
left: 50%;
transform: translateX(-50%) rotate(135deg); 
/*
-webkit-transform: rotate(45deg);
position: absolute;bottom: calc( 20% - -14em );
right: 50%;transform: rotate(135deg);*/
}
/*.lp4Top_contents a:hover::before{
content: "";
width: 6px;
height: 6px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
position: absolute;
bottom: 8px; 
left: 50%;
transform: translateX(-50%) rotate(135deg); 
}*/


.ui_about_solution_url a {
    height: 38px !important;
    color: #048296;
    font-weight:bold;
    display: block !important;
    padding: 5px 10px 5px 35px;
    text-decoration: none !important;
    transition: 1.0s !important;
   text-align: left !important;
    border-radius: 30px; 
}
.ui_about_solution_url a:hover{
    text-decoration: none !important;
    opacity: 0.5 !important;
    background-color: #bee6ea !important;
    border-radius: 30px; 
} 
.ui_about_solutionLink{
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 20px 20px;
    -moz-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -ms-background-size: 20px 20px;
    text-align: left;
    background-color: #d4f4f7;
    border-radius: 30px; 
background-image: url(image/lineup_ui_question.gif);
}
.ui_about_solutionLink_w340px{
   width:340px;
   margin: 10px auto 40px;
}
.ui_about_solution_h36px{
display: grid;
align-items: center;
height : 36px;
}
.ui_next_solution a {
    height: 38px !important;
    color: #fff;
    font-weight:bold;
    display: block !important;
    padding: 5px 10px;
    text-decoration: none !important;
    transition: 1.0s !important;
   text-align: center !important;
    border-radius: 30px; 
}
.ui_next_solution a:hover{
    text-decoration: none !important;
    opacity: 0.5 !important;
    background-color: #037385 !important;
    border-radius: 30px; 
} 
.ui_next_solutionLink{
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 20px 20px;
    -moz-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -ms-background-size: 20px 20px;
    text-align: left;
    background-color: #048296;
    border-radius: 30px; 
}
.ui_next_solutionLink_w300px{
   width:300px;
   margin: 10px auto;
}
.ui_about_solution_h36px{
display: grid;
align-items: center;
height : 36px;
}
 /*.container5 .item_w20p {
  flex: 0 1 20%;
  position: relative;
}*/
.ui_border_01 {
    /*border: solid 1px #b3b3b3;*/
}
.ui_border_01_o {
    border: solid 2px #048296;
}
/* PC版の基本スタイル（必要に応じて調整してください） */
.item_w20p {
  width: 100%;
}
.ui_img_01, .ui_text_01 {
  width: 100%;
}
.gazou img {
  width: 100%;
  height: auto;
  display: block;
}

.ui_tit_01{
color:#02A4B1;
    text-align: center;
    font-size: 98%;
    margin: 0 auto 5px;
}
.ui_tit_02{
color:#004596;
    text-align: center;
    font-size: 98%;
    margin: 0 auto 5px;
}
.ui_tit_03{
color:#00964E;
    text-align: center;
    font-size: 98%;
    margin: 0 auto 5px;
}
.ui_tit_04{
color:#0264FA;
    text-align: center;
    font-size: 98%;
    margin: 0 auto 5px;
}
.ui_tit_05{
color:#3A71B4;
    text-align: center;
    font-size: 98%;
    margin: 0 auto 5px;
}
 /*.ui_border_01,
.ui_border_01_o
 {
     margin: 20px 0;
    padding: 10px;
    border-radius: 15px;
    background-color: #fff;
  width: 86%;
}*/

/* */
#shindan-container {
    scroll-margin-top: 20px; /* */
    margin-top: 30px;
}


.question-block {
   /* padding: 20px;
    background: white;*/
    border-radius: 8px;
    /*box-shadow: 0 2px 5px rgba(0,0,0,0.05);*/
    margin-bottom: 20px;
}

/*2ページ3ページ診断結果*/
#page-2, #page-3, #result-area {
    display: none;
}

/*  */
.options-container {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.option-card input[type="checkbox"],
.option-card input[type="radio"] {
    display: none;
}

.card-content {
    display: flex;
    flex-direction: column;
   /* align-items: center;*/
    flex: 1;
    /*min-width: 217px;*/
	width: 217px;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
   /*  text-align: center;*/
    position: relative;
}

.card-content img {
   /* width: auto;
    height: auto;*/
    border-radius: 4px;
    margin-bottom: 8px;
    /*aspect-ratio: 4/3;*/
    object-fit: cover;
}

.card-content span {
    font-size: 13px;
    font-weight: bold;
    color: #333;
}

.card-content:hover {
    border-color: #D4F4F7;
    background: #f4f4f4;
}

/*  */
.option-card input[type="checkbox"]:checked + .card-content,
.option-card input[type="radio"]:checked + .card-content {
    border-color: #048296;
    background: #f4f4f4;
    box-shadow: 0 0 8px rgba(40,167,69,0.2);
}

/*  */
.btn {
    display: block;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-next {
    border: 2px solid #048296;
    background: #fff;
    color: #048296;
    margin: 25px auto 10px;
	width: 300px;
    border-radius: 30px; 
}

.btn-next:hover {
    background: #f4f4f4;
}

/* やり直しボタンの簡易スタイル */
    .btn-restart {
        display: block;
        margin: 30px auto 0;
        padding: 10px 20px;
        cursor: pointer;
	width: 300px;
    border-radius: 30px; 
    }

/* 前に戻る */
.btn-back {
    border: 2px solid #737373;
    background: #fff;
    color: #737373;
    margin: 15px auto 10px;
	width: 300px;
    border-radius: 30px; 
}

.btn-back:hover {
    background: #B3B3B3;
}

/* error */
#error-message {
    color: #dc3545;
    font-weight: bold;
    margin-top: 15px;
    display: none;
    text-align: center;
}

/* kekka */
#result-area {
    padding: 20px;
    border: 2px dashed #28a745;
    border-radius: 8px;
    background: #fff;
    text-align: center;
}

.score-display {
    font-size: 24px;
    color: #28a745;
    font-weight: bold;
    margin: 15px 0;
}

    /* エラーメッセージの基本スタイル */
.error-text {
    color: #cc0000;
    font-weight: bold;
        margin-top: 10px;
    display: none;
    text-align: center;
}
.TextStyle_q2font{
	font-size: 96%;
	margin: 15px auto;
	text-align: center;
}
.TextStyle_q3font{
	font-size: 1.8em;
	margin: 35px auto;
	text-align: center;
}
.mb35{
	margin-bottom: 35px;
}
.q2_3mt40{
	margin-bottom: 40px;
}

        /* 診断エリア全体のコンテナ */
        #shindan-container {
            min-height: 450px; /* ページ切り替え時に画面がガタつかないよう高さを確保 */
            box-sizing: border-box;
            position: relative;
        }

        /*  吹き出しスタイル */
        .balloon-wrapper {
            position: relative;
            margin: 20px auto;
            text-align: center;
        }
        .balloon {
            display: none;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            padding: 20px;
            background: #F4F4F4;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            border-radius: 8px;
            z-index: 1000;
        }
        .balloon::before {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 15px solid transparent;
            border-bottom-color: #F4F4F4;
        }
        .balloon .close-btn {
            position: absolute;
            top: 5px;
            right: 10px;
            border: none;
            background: none;
            font-size: 24px;
            cursor: pointer;
        }

@media screen and (min-width: 995px) and (max-width: 1304px) {
    .OptionWideRWD .Grid4, .OptionWideRWD .Grid3, .OptionWideRWD .Grid1 {
         padding: 0 0 0 0px;
	}
	}

@media screen and (max-width: 1289px) {
        #menu2 {
            width: 100%;
        }
    }
@media screen and (min-width: 1279px) and (max-width: 1304px) {
	.page_w2 {
    width: 736px;
}
	.page_w3 {
    width: 488px;
}
.card-content {
    width: 209px;
}
}
@media screen and (min-width: 995px) and (max-width: 1278px) {
  .OptionWideRWD .Grid4, .OptionWideRWD .Grid3, .OptionWideRWD .Grid1 {
    padding: 0 0 0 0px;
  }
		.page_w2 {
    width: 736px;
}
	.page_w3 {
    width: 488px;
}
	.card-content {
    width: 204px;
}
}
/* for 995px -
=========================================================================================== */

@media screen and (min-width: 995px) {


}



/* for - 994px
=========================================================================================== */

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

}

/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
	.Section {
    margin-left: 0px !important;
    margin-right: 0px!important;
}
.top_visual_bkbg {
        background-color: #000 !important;
        padding: 10px;
    }
	
 .container3 {
        display: flex !important;
    }
	    .card-content {
        width: 209px !important;       /* 幅を100%にする */
        min-width: 0;      /* PC版の217pxの制限を解除する */
        flex: none;        /* flexによる予期せぬ伸縮を防ぐ */
    flex-direction: row-reverse; /* 右から左へ配置（テキストが左、画像が右になる） */
   
}
.container2 .item_w600px {
    flex: 0 1 49%;
    position: relative;
}
	.container2 .item_w475px {
    flex: 1 0 49%;
    position: relative;
    margin: 4px;
}
	container3 .item_w33_bg {
    flex: 0 1 30%;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.page_w1{
	width: 100%;
    margin: 0 auto;
} 
.page_w2{
	width: 100%;
    margin: 0 auto;
} 
.page_w3{
	width: 100%;
    margin: 0 auto;
} 
}



/* for - 579px
=========================================================================================== */

@media screen and (max-width: 579px) {
.container2 .item_w600px {
    flex: 0 1 100%;
    position: relative;
}
	.container2 .item_w475px {
    flex: 1 0 100%;
    position: relative;
    margin: 4px;
}
	container3 .item_w33_bg {
    flex: 0 1 100%;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
	
    .card-content {
        width: 139px !important;       /* 幅を100%にする */
        min-width: 0;      /* PC版の217pxの制限を解除する */
        flex: none;        /* flexによる予期せぬ伸縮を防ぐ */
    flex-direction: row-reverse; /* 右から左へ配置（テキストが左、画像が右になる） */
   
}
}


/* for - 519px
=========================================================================================== */

@media screen and (max-width: 519px) {
.logo_icon {
    text-align: right;
    margin: 0 0 0px;
}
	    .card-content {
        width: 430px !important;       /* 幅を100%にする */
        min-width: 0;      /* PC版の217pxの制限を解除する */
        flex: none;        /* flexによる予期せぬ伸縮を防ぐ */
    flex-direction: row-reverse; /* 右から左へ配置（テキストが左、画像が右になる） */
   
}
	.ui_text_01 {
    width: 60%;                 /* テキストの幅を60%に指定 */
    text-align: left!important;
    margin: 0 0 0px;
  }
  .ui_img_01 {
    width: 40%;                 /* 画像枠の幅を40%に指定 */
	  float: right;
    margin: 0 0 0px;
  }
.ui_tit_01,
.ui_tit_02,
.ui_tit_03,
.ui_tit_04,
.ui_tit_05 {
    text-align: left!important;
    font-size: 100%;
    margin: 0 0 0px;
}
	.ui_about_solutionLink_w340px{
   width:100%;
}

.TextStyle_q2font{
	font-size: 96%;
	margin: 15px 0;
	text-align: left;
}
.TextStyle_q3font{
	font-size: 1.1em;
	margin: 15px 0;
	text-align: left;
}
	#shindan-container {
        /* 数値を大きくして、画面上部からガッツリ引き離す */
        scroll-margin-top: 0px; 
    }
}


/* for - 412px
=========================================================================================== */

@media screen and (max-width: 412px) {
.logo_icon {
    text-align: right;
    margin: 0 0 0px;
}
	    .card-content {
        width: 350px !important;       /* 幅を100%にする */
        min-width: 0;      /* PC版の217pxの制限を解除する */
        flex: none;        /* flexによる予期せぬ伸縮を防ぐ */
    flex-direction: row-reverse; /* 右から左へ配置（テキストが左、画像が右になる） */
   
}
}

/* for - 399px
=========================================================================================== */

@media screen and (max-width: 399px) {
.logo_icon {
    text-align: right;
    margin: 0 0 0px;
}
	    .card-content {
        width: 305px !important;       /* 幅を100%にする */
        min-width: 0;      /* PC版の217pxの制限を解除する */
        flex: none;        /* flexによる予期せぬ伸縮を防ぐ */
    flex-direction: row-reverse; /* 右から左へ配置（テキストが左、画像が右になる） */
   
}
	/*.ui_text_01 {
    width: 60%;   
    text-align: left!important;
    margin: 0 0 0px;
  }
  .ui_img_01 {
    width: 40%; 
	  float: right;
    margin: 0 0 0px;
  }
.ui_tit_01,
.ui_tit_02,
.ui_tit_03,
.ui_tit_04,
.ui_tit_05 {
    text-align: left!important;
    font-size: 100%;
    margin: 0 0 0px;
}
	.ui_about_solutionLink_w340px{
   width:100%;
}

.TextStyle_q2font{
	font-size: 96%;
	margin: 15px 0;
	text-align: left;
}
.TextStyle_q3font{
	font-size: 1.1em;
	margin: 15px 0;
	text-align: left;
}*/
}