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

/* 「○○のご紹介」帯色----------------------------------------------------------- */
.corp_detail h2, #qa h2, .caution {
    background-color: #b10000; /* 帯の色 */
    color: #ffffff; /* テキストの色 */
}

/* ------------------------------------------------------------------------------- */
/* basic（※変更しないでください）------------------------------------------------ */
/* ------------------------------------------------------------------------------- */

body {
    margin: 0;
    padding: 0;
    font-family: "ヒラギノ角ゴ Pro W3", hirakakupro-w3, "メイリオ", "meiryo", verdana, "ＭＳ Ｐゴシック", "ms pgothic", sans-serif, "Font Awesome 6 Free";
    font-size: 16px;
    line-height: 1.8em;
}

ol, ul {
    list-style: none;
}
a, img {
    text-decoration: none;
}

hr {
    border: 0;
    height: 3px;
    background-color: #ccc;
}

#wrapper {
    background: #FFF;
    color: #444;
}

#frame {
    width: 800px;
    margin: 30px auto 60px;
}

#logo {
    width: auto; 
    max-width: 400px; /* 最大幅を400pxに制限 */
    margin: 0 auto;
    display: block;
}

#mile {
    width: auto; 
    max-width: 143px; /* 最大幅を143pxに制限 */
    display: block;
}



#intro {
    margin: 30px 0px 20px;
}

#intro h1 {
    font-size: 1.5em;
    font-weight: bold;
}

#intro p {
    text-align: center;
    margin: 30px auto;
}

#intro div {
    border: 1px solid #ccc;
    padding: 20px 30px;
    margin: 30px 0px;
}

#intro div p {
    text-align: left;
    font-weight: bold;
    margin: 0px 0px 7px;
}


/* 横幅が変わる際はwidthを変更する */
#topimg  {
    width: 800px;
    display: block;
    margin: 0 auto;
}
.corp_detail h2, #qa h2 {
    padding: 2px 7px;
    font-size:  1.2em;
    font-weight: bold;
    margin: 15px 0px 15px;
}

.corp_detail p {
    text-align: left;
    margin: 20px auto;
}

.corp_detail span {
    text-align: left;
    margin: 20px auto;
    font-weight: bold;
}

.corp_detail #most {
    color: red;
    font-weight: bold;
}

#parent{
	text-align: center;
	font-size: 18px;
}

h3 {
	position: relative;
	line-height: 1.4;
	padding:0.25em 1em;
	display: inline-block;
	top:0;
  }
  h3:before, h3:after {
	position: absolute;
	top: 0;
	content:'';
	width: 8px;
	height: 100%;
	display: inline-block;
  }
  h3:before {
	border-top: dotted 1px #535aaa;
	border-left: dotted 1px #535aaa;
	border-bottom: dotted 1px #535aaa;
	left: 0;
  }
  h3:after {
	content: '';
	border-top: dotted 1px #535aaa;
	border-right: dotted 1px #535aaa;
	border-bottom: dotted 1px #535aaa;
	right: 0;
  }

#under{
	text-decoration: underline;
}




/* 横幅が変わる際はwidthを変更する */
#img1 {
    max-width: 800px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 横幅が変わる際はwidthを変更する */
#img2 {
    max-width: 800px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 横幅が変わる際はwidthを変更する */
#img3 {
    max-width: 800px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}


#katarog{
	display:block;
	width: 800px;
	margin: 0 auto;
}
#katarog p{
	border-bottom:solid #ff0000 1px;

}

.caution {
    padding: 2px 7px;
    font-size: 18px;
    font-weight: bold;
    margin: 30px 0px 0px;
}

.caution2 {
    border: 2px solid #ff9999;
    padding: 15px;
    font-size: 16px;
    margin-bottom: 10px;
}

.caution2 ul {
    list-style: inside;
    margin-left: -5px;
    padding-left: 2em;
    text-indent: -1em;
}

.caution2 ul li {
    margin-left: 10px;
}

.caution2 .red {
    font-size: 16px;
    color: red;
}

#qa div {
    font-size: 16px;
}

#qa h2{
	margin-top: 30px;
}

#qa p {
    margin-bottom: 7px;
    font-weight: bold;
}

#qa .an {
    margin-bottom: 7px;
    font-size: 16px;
    font-weight: normal;
    padding-left: 1em;
}

.btn {
    width: 176px;
    height: 36px;
    background-color: #c00303;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: auto; /* 右寄せ */
    margin-right: 0;
}

.btn a {
    color: white;
    font-weight: 900;
    font-size: 18px;
    text-decoration: none;
}
.under a {
    line-height: 18px;

}

.top {
    transition: all 0.5s;
}

.top:hover {
    background-color: #f12c2c;
}

.under {
    box-shadow: 0 7px #760221;
    transition: all 0.5s;
}

.under:hover {
    background-color: #f12c2c;
}

.under:active {
    box-shadow: none;
    position: relative;
    top: 7px;
}

.fa {
    margin-right: 10px;
}

.under .fa {
    margin-right: 10px;
}

/* ------------------------------------------------------------------------------- */
/* * レスポンシブ対応 タブレット*------------------------------------------------ */
/* ------------------------------------------------------------------------------- */

@media (max-width: 800px) {
    #frame {
        width: 95%;
        max-width: 800px;
        margin: 20px auto;
      }

    #logo {
        width: 35%; /* ロゴを少し縮小 */
        margin: 0 auto; /* 中央寄せ */
    }

	#mile {
        width: 35%; /* ロゴを少し縮小 */
		margin-top: 3%;
    }

    #img1 {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
	 /*下記に画像が更に追加の場合は 「,#画像のID」 追加してください*/
    #topimg, #img1, #img2, #img3 {
        max-width: 100%;/* 幅を100%に設定 */
        height: auto; /* 縦横比を維持 */
        object-fit: cover; /* 必要に応じて切り取る */
        display: block; /* 中央寄せのためにブロック要素に */
        margin: 0 auto; /* 左右マージンを自動設定で中央寄せ */		
	}

    .corp_detail h2,#qa h2 {
        margin-top: 10px; 
        font-size: 1.2em; /* 見出しのフォントサイズを調整 */
    }

    .corp_detail p, .corp_detail span {
        font-size: 16px; /* フォントサイズを調整 */
    }

    .btn {
        width: 100%;
        max-width: 800px;
        background-color: #c00303;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    .btn a {
        font-size: 1.3em /* ボタンのフォントサイズを調整 */
    }
}

/* ------------------------------------------------------------------------------- */
/* * レスポンシブ対応 スマートフォン*------------------------------------------------ */
/* ------------------------------------------------------------------------------- */

@media (max-width: 480px) {
   
    #frame {
        width: 95%; /* 幅を95%に変更 */
        max-width: 480px;
        margin: 20px auto; /* マージンの調整 */
    }

	#logo {
        width: 35%; /* ロゴを少し縮小 */
        margin: 0 auto; /* 中央寄せ */
    }
	
	#mile {
        width: 35%; /* 少し縮小 */
		margin-top: 3%;

    }

	/*下記に画像が更に追加の場合は 「,#画像のID」 追加してください*/
     #topimg, #img1, #img2, #img3 {
	    max-width: 100%;
        height: auto; /* 縦横比を維持して高さを自動調整 */
        display: block; /* 中央寄せのためにブロック要素に */
        margin: 0 auto; /* 左右マージンを自動設定で中央寄せ */		
	}
    #intro h1 {
        font-size: 1.5em; /* フォントサイズを調整 */
    }

    .corp_detail{
        margin-top: 10px; 
    }
    .corp_detail h2,#qa h2 {
        margin-top: 10px; 
        font-size: 1.2em; /* 見出しのフォントサイズを調整 */
    }

    .corp_detail p {
        font-size: 16px; /* 本文のフォントサイズを調整 */
        line-height: 1.8em; /* 行間を調整 */
        margin: 10px 0; /* マージンを調整 */
    }

   
    .corp_detail p, .corp_detail span {
        font-size: 1em; 
    }

    .caution, .caution2 {
        font-size: 1em; 
    }


    .btn {
        width: 100%;
        max-width: 480px;
        background-color: #c00303;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        align-items: center;
      }

    .btn a {
        font-size: 1.3em /* ボタンのフォントサイズを調整 */
    }
}