@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: 60px 0px 16px;
}

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

/* 横幅が変わる際はwidthを変更する */
#img1 {
    width: 594px;
    display: block;
    margin: 0 auto;
}

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


.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: block;
    border-radius: 4px;
    text-align: center;
    float: right;
    margin-bottom: 20px;
}


.btn a {
    line-height: 36px;
    color: white;
    display: block;
    font-weight: 900;
    font-size: 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;
}

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

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

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

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

	 /*下記に画像が更に追加の場合は 「,#画像のID」 追加してください*/
    #topimg, #img1, #img2 {
        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%;
        margin: 10px auto;
        background-color: #c00303;
        display: block;
        text-align: center;
        float: none;
    }
    .btn a {
        font-size: 1.3em /* ボタンのフォントサイズを調整 */
    }
}

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

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

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

    }

	/*下記に画像が更に追加の場合は 「,#画像のID」 追加してください*/
     #topimg, #img1, #img2 {
	    width: 100%;
        max-width:480px; 
        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%;
        margin: 10px auto;
        background-color: #c00303;
        display: block;
        text-align: center;
        float: none;
    }

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