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

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

#corp_name{
	font-size:18px;
	font-weight:bold;
	color:#214285;
	border-left:5px solid #3399CC;
	padding-left:7px;
}

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

#intro h1{
	font-size:18px;
	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を変更する */

#img3{
	width: 660px;
	display: block;
	margin: 0 auto;
 }

#img4{
	width: 800px;
	display: block;
	margin: 0 auto;
}
#img5{
	width: 800px;
	display: block;
	margin: 0 auto;
}
#img6{
	width: 800px;
	display: block;
	margin: 0 auto;
}

#img7{
	width: 800px;
	margin: 0 auto;
	display: block;
}
.corp_detail h2, #qa h2{
	padding:2px 7px;
	font-size:17px;
	font-weight:bold;
	margin:30px 0px 10px;
	clear: both;
	
}


.corp_detail span{
	text-align:left;
	font-weight:bold;
}

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

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


.caution{
	padding:2px 7px;
	font-size:17px;
	font-weight:bold;
	margin:50px 0px 0px;

}

.caution2{
	border:2px solid#ff9999;
	padding:15px;
	font-size:1em;

}

.caution2 ul{
	list-style: inside;
	margin-left: 0;
	padding-left: 1em;
	text-indent: -1em;

}

.caution2 .red{
	font-size:13px;
	color: red;

}

.caution2 p{
	font-weight: bold;

}
/* 申し込むボタンの設定　ここから */
.btn {
    width: 176px;
    height: 36px;
    background-color: #c00303;
    display: block;
    border-radius: 4px;
    text-align: center;
    float: right;
    margin-top: 10px;
    margin-bottom: 15px;
}

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

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

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

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


.id1 {
	float:right;
	text-align:right;
	width:350px;
	margin-top: 30px;
}

/* レスポンシブ対応 */
@media (max-width: 800px) {
	#frame {
        width: 95%; /* 幅を95%に変更 */
        margin: 0 auto; /* 中央に配置 */
    }

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

	#img3, #img4, #img5, #img6, #img7 {
        width: 100%; /* 幅を100%に設定 */
		max-width: 800px;
        height: auto; /* 縦横比を維持 */
        object-fit: cover; /* 必要に応じて切り取る */
        display: block; /* 中央寄せのためにブロック要素に */
        margin: 0 auto; /* 左右マージンを自動設定で中央寄せ */		
	}

    .topic, #katarog {
        width: 100%; /* 幅を100%に変更 */
    }

    .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) {
    body {
        font-size: 16px; /* フォントサイズを調整 */
    }

	#frame {
        width: 95%; /* 幅を95%に変更 */
        margin: 0 auto; /* 中央に配置 */
    }

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

	#img3, #img4, #img5, #img6, #img7 {
        width: 100%; /* 幅を100%に設定 */
		max-width: 480px;
        height: auto; /* 縦横比を維持 */
        object-fit: cover; /* 必要に応じて切り取る */
        display: block; /* 中央寄せのためにブロック要素に */
        margin: 0 auto; /* 左右マージンを自動設定で中央寄せ */		
	}

	
	#img1, #img2 {
        width: 80%; /* 幅を100%に設定 */
        height: auto; /* 縦横比を維持 */
        object-fit: cover; /* 必要に応じて切り取る */
        display: block; /* 中央寄せのためにブロック要素に */
        margin:0 10%; /* 左右マージンを自動設定で中央寄せ */	
	}

    #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 /* ボタンのフォントサイズを調整 */
    }



}