@charset "utf-8";
/* CSS Document */

/* 一般
-----------------------------------------*/
html{
    font-size: 62.5%;
    /*scroll-behavior: smooth;*/
}
body{
	font-size: 1.6rem; 
    font-family: 'Noto Sans JP', sans-serif;
	color: #525454;
    background: #fbf5f2;
	-webkit-text-size-adjust: 100%;
	position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
a,
a *{
	color: #525454;
	text-decoration: none;
	-webkit-transition: all .3s;
			transition: all .3s;
}
p:empty{
    display: none;
}
@media screen and (min-width:640px) {
a:hover{
	opacity: .7;
}
.sponly{
	display: none;
}
}
@media screen and (max-width:639px) {
body{
	font-size: 1.4rem;
}
a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
}
}
@media screen and (max-width:859px) {
.pconly{
	display: none;
}
}



/* ヘッダー
-----------------------------------------*/
#header{
    text-align: center;
    padding: 40px 40px 0 40px;
}
@media screen and (max-width:639px) {
#header{
    padding: 20px 20px 0 20px;
}
}


/* コンテンツ
----------------------------------------- */

/* ----- 共通 ----- */
#main{
    padding: 60px 40px 80px 40px;
}
.contents{
    max-width: 900px;
    margin: 0 auto;
}
@media screen and (max-width:639px) {
#main{
    padding: 40px 20px 60px 20px;
}
}

/* ----- トップ ----- */
#txt_main{
    font-size: 1.8rem;
    line-height: 2;
}
#txt_main em{
    font-size: 2.2rem;
    font-weight: bold;
    background: linear-gradient(transparent 70%, #fdd108 30%);
}
#top_contents figure{
    margin-top: 80px;
}
#link_leaflet{
    margin-top: 80px;
    text-align: center;
}
#link_leaflet a{
    position: relative;
    font-size: 2.6rem;
    font-weight: bold;
    border-bottom: dashed 2px #fdd108;
    padding-bottom: 10px;
}
#link_leaflet a::before{
    content: '\f1c1';
    font-family: "Font Awesome 6 Free";
    font-weight: 700;
    color: #fdd108;
    font-size: 4.6rem;
    margin-right: 5px;
}
#btn_start{
    max-width: 600px;
    width: 100%;
    margin: 80px auto 0 auto;
}
#btn_start a{
    display: block;
    background: #fdd108;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    padding: 30px 20px;
}
@media screen and (max-width:639px) {
#txt_main{
    font-size: 1.6rem;
    line-height: 1.8;
}
#txt_main em{
    font-size: 1.8rem;
}
#top_contents figure,
#link_leaflet,
#btn_start{
    margin-top: 60px;
}
#link_leaflet a{
    font-size: 1.5rem;
}
#link_leaflet a::before{
    font-size: 2.6rem;
}
#btn_start a{
    font-size: 2.2rem;
    padding: 20px;
}
}


/* ----- チェック ----- */
#question{
    width: calc(100% - 8rem); 
    margin: 4rem 4rem 0 4rem;
    border: solid 1px #111;
    padding: 40px;
    font-size: 2.6rem;
    font-weight: bold;
    text-align: center;
    position: relative;
}
#question::before{
    background: #fff;
    border-radius: 50%;
    content: '\f059';
    font-family: "Font Awesome 6 Free";
    font-weight: 700;
    color: #fdd108;
    font-size: 8rem;
    line-height: 1;
    position: absolute;
    top: -4rem;
    left: -4rem;
}
#answer{
    width: calc(100% - 8rem); 
    margin: 80px 4rem 0 4rem;
}
#answer li:nth-child(n+2){
    margin-top: 20px;
}
#answer li a{
    display: block;
    background: #fdd108;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    padding: 30px 20px;
}
@media screen and (min-width:640px) {
}
@media screen and (max-width:639px) {
#question{
    width: calc(100% - 6rem); 
    margin: 3rem 3rem 0 3rem;
    padding: 30px 20px;
    font-size: 2rem;
}
#question::before{
    font-size: 6rem;
    top: -3rem;
    left: -3rem;
}
#answer{
    width: calc(100% - 6rem); 
    margin: 60px 3rem 0 3rem;
}
#answer li a{
    font-size: 2.2rem;
    padding: 20px;
}
}


/* ----- 結果 ----- */
/*
#result .r_title{
    color: #fff;
    padding: 40px;
}
#result dl#r_title01{
    background: #00b9ef;
}
#result dl#r_title02{
    background: #f39800;
}
#result dl#r_title03{
    background: #ca67a4;
}
#result dl#r_title04{
    background: #8fc31f;
}
#result .r_title dt{
    font-size: 3.8rem;
    font-weight: bold;
}
#result .r_title dt::before{
    content: '■';
    margin-right: 5px;
}
#result dl#r_title01 dt::before{
    color: #addef8;
}
#result dl#r_title02 dt::before{
    color: #facd89;
}
#result dl#r_title03 dt::before{
    color: #e4b8d5;
}
#result dl#r_title04 dt::before{
    color: #cce198;
}
#result .r_title dd{
    margin-top: 20px;
    font-size: 2.4rem;
    font-weight: bold;
}
*/
#result #r_image{
    max-width: 800px;
    width: 100%;
    margin: 0 auto 40px auto;
}
#result #r_save{
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border: dotted 1px #999;
}
#result .r_point{
    margin-top: 60px;
    font-size: 2.2rem;
    padding-left: 130px;
    position: relative;
}
#result .r_point::before{
    position: absolute;
    left: 0;
    top: calc(50% - 50px);
}
#result #r_point01::before{
    content: url("../images/point01.png");
}
#result #r_point02::before{
    content: url("../images/point02.png");
}
#result #r_point03::before{
    content: url("../images/point03.png");
}
#result #r_point04::before{
    content: url("../images/point04.png");
}
@media screen and (max-width:639px) {
/*
#result .r_title{
    padding: 20px;
}
#result .r_title dt{
    font-size: 2.8rem;
}
#result .r_title dd{
    margin-top: 15px;
    font-size: 1.8rem;
}
*/
#result #r_image{
    margin: 0 auto 30px auto;
}
#result .r_point{
    margin-top: 40px;
    font-size: 1.6rem;
    padding-left: 0;
    padding-top: 115px;
}
#result .r_point::before{
    left: calc(50% - 50px);
    top: 0;
}
}

#btn_back{
    max-width: 320px;
    width: 100%;
    margin: 60px auto 0 auto;
}
#btn_back a{
    display: block;
    background: #999;
    color: #fff;
    text-align: center;
    font-size: 2.4rem;
    font-weight: bold;
    width: 100%;
    padding: 25px 20px;
    border-radius: 10px;
}
@media screen and (max-width:639px) {
#btn_back a{
    font-size: 2rem;
    padding: 20px;
}
}

#btn_back.backtotop{
    max-width: 540px;
}
#btn_back.backtotop a{
    background: #fdd108;
    padding: 30px 20px;
}



/* シェアボタン
----------------------------------------- */
#r_share{
    margin-top: 80px;
}
#r_share dt{
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}
#r_share dt em{
    display: block;
    font-size: 2.6rem;
    margin-bottom: 10px;
}
#r_share dt em span{
    background: linear-gradient(transparent 70%, #fdd108 30%);
    font-weight: bold;
}
#r_share ul{
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
#r_share li{
    margin: 0 20px;
}
#r_share li i{
    font-size: 6rem;
}
#r_share li:nth-child(1) i{
    color: #0F1419;
}
#r_share li:nth-child(2) i{
    color: #1877f2;
}
#r_share li:nth-child(3) i{
    color: #00B900;
}
@media screen and (max-width:639px) {
#r_share dt{
    font-size: 1.6rem;
}
#r_share dt em{
    display: block;
    font-size: 2.2rem;
}
#r_share ul{
    margin-top: 30px;
}
#r_share li i{
    font-size: 5rem;
}
}



/* フッター
----------------------------------------- */
#footer{
    padding: 40px;
    text-align: center;
}
@media screen and (max-width:639px) {
#footer{
    padding: 20px;

}
}





/* 20250717 */
#link_leaflet a {
    display: inline-flex;            /* 横並び */
    align-items: center;             /* 縦中央揃え */
    white-space: nowrap;             /* 折り返し禁止 */
}

#link_leaflet a::before {
    flex: 0 0 auto;                  /* アイコンは固定幅 */
    display: inline-block;           /* ブロック化して高さ安定 */
    margin-right: 0.5em;             /* テキストとの間隔 */
}
.nowrap {
  white-space: nowrap;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}