*,
*:before,
*:after {
box-sizing: border-box;
}



body {
margin: 0;
padding: 0;
font-family: "Noto Serif JP", serif;
font-weight: 400;
font-style: normal;
background-color: #f5f5f5; /* 初期背景色を灰色に設定 */

}


/*====囲みの枠=====================================================================*/

.wrapper {
max-width: 1080px;
padding: 20px;
margin: 2rem auto;
background-color:#ffffff;
}

/* スマートフォン用のスタイル */
@media screen and (max-width: 767px) {

.wrapper {
width:100%;
padding: 20px;
margin: 2rem auto;
background-color:#ffffff;
}
}

/*======================*/



.content_box_white {
background-color: #ffffff;
margin: 0 auto;
padding: 20px;
}


.content_box_gray {
background-color: #f2f2f2;
margin: 0 auto;
padding: 20px;
}



/*==設定====================*/


.main_img {
margin: 0 auto;
text-align: center;
}

img {
max-width:100%;
height:auto;
}



/*==見出しの設定====================*/

h1.title {
padding: 20px;
font-size: 2.2rem;
color: #000;
margin: 0 auto;
text-align: center;
letter-spacing: .2rem;
}


h2 {
font-size : 2rem;
margin: 0 auto;
padding: 0;
}


h3 {
font-size: 1.6rem;
line-height: 1.6;
}


h4 {
font-size: 1.2rem;
margin: 0 auto;
padding: 0;
}



h5 {
font-size: 0.8rem;
margin: 0 auto;
text-align: left;

}



/*======================*/

p {
font-size : 1rem;
line-height : 1.6;
margin:1rem 0;
}

ul,ol {
font-size : 1rem;
margin:0 auto 20px;
text-align: left;
}

ul li,
ol li {
font-size : 1rem;
line-height : 1.8;
}


/*==仕切り線==*/

hr {
height: 6px;
background-color: #B92424;
width: 90%;
border: none;
margin: 2rem auto;
border-radius: 20px;
}

/*====テキスト装飾=====================================================================*/


.txt_red {
color: crimson;
font-weight: 700;
}

.txt_blue {
color: rgb(20, 33, 220);
}

.text_large {
font-size:1.2rem;
}

.text_medium {
font-size:1rem;
}

.text_small {
font-size:.8rem;
}

.text_right {
text-align: right;
}

.text_left {
text-align: left;
}

.text_center {
text-align: center;
}



/*========================================================*/

.youtube {
width: 100%;
padding: 0;
box-sizing: border-box;
}

.youtube .inner {
padding-top: 56.25%;
position: relative;
height: 0;
overflow: hidden;
}

.youtube .inner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*========================================================*/

.image-grid {
display: flex;
flex-wrap: wrap;
margin: -10px auto;
width: 90%;
}

.image-grid-item {
text-align: center;
flex: 0 0 calc(33.33% - 20px);
max-width: calc(33.33% - 20px);
margin: 10px;
}

/* スマートフォン用のスタイル */
@media screen and (max-width: 767px) {
.image-grid {
flex-direction: column; /* ボックス内を縦に並べる */
}

.image-grid-item {
max-width: 100%;
text-align: center;
margin: 10px 0; /* 上下の要素の間隔を指定 */
}
}

/*========================================================*/

.title-section {
text-align: center;
margin: 20px 0;
}

/*============================*/

.card-wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
/*justify-content: space-around;*/
gap: 30px;
}

.card {
display: grid;
grid-template-rows: auto 1fr;
max-width: calc(33.33% - 20px);
gap: 20px;
padding: 10px;
}

.card-top img {
display: block;
width: 100%;
height: auto;
margin-bottom: 15px;
}

.card-content {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
width: 100%;
margin: 0 auto;
}

.card-title {
display: flex;
text-align: center;
align-items: center;
height: 50px;
max-height: 50px;
width: 100%;
}

.card-title h4 {
font-size: 1.1rem;
}

.card-description {
text-align: left;
}

.card-text {
font-size: .8rem;
}

.card-title span {
display: inline-block;
}

/* スマートフォン用のスタイル */
@media screen and (max-width: 930px) {
.card {
max-width: calc(50% - 20px); 
}
.card-title h4 {
font-size: 1.2rem;
}
}

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

.card-wrapper {
flex-direction: column; /* ボックス内を縦に並べる */
}

.card {
max-width: 100%;
text-align: center;
}

.card-description {
height: auto;
}

.card-head {
height: auto;
}

.card-title h4 {
font-size: 1rem;
}

.card-head .long {
font-size: clamp( 1rem, 1.2vw, 1.5rem);
}

.btn_blue {
margin: 10px auto;
}
}

/* 
.image-grid img {
flex: 0 0 calc(33.33% - 20px);
max-width: calc(33.33% - 20px);
margin: 10px;
}

.image-grid-item img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

.image-grid-item h4 {
font-size: 1.2rem;
margin: 20px 0;
}

.image-grid-item p {
font-size: .9rem;
margin: 6px 0;
text-align: left;
} */



/*==[案内人の写真]================*/

.circle-box {
display: flex;
justify-content: center;
align-items: center;
}

.circle-img {
width: 200px; /* 画像のサイズを設定 */
height: 200px;
border-radius: 50%; /* 丸く切り抜く */
overflow: hidden; /* 余白を隠す */
}

.circle-img img {
width: 100%; /* 画像を100%の幅で表示 */
height: auto;
}


/*======================*/

.btn_blue {
width: 100%;
}

a.btn_01 {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 50px;
position: relative;
background: #283ba6;
border: 1px solid #283ba6;
box-sizing: border-box;
padding: 0 25px 0 40px;
color: #fff;
font-size: 14px;
letter-spacing: 0.1em;
line-height: 1.3;
text-align: left;
text-decoration: none;
transition-duration: 0.3s;
}

a.btn_01:before {
content: '';
width: 8px;
height: 8px;
border: 0;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 25px;
margin-top: -6px;
}

a.btn_01:hover {
background: #fff;
color: #283ba6;
}

a.btn_01:hover:before {
border-top: 2px solid #283ba6;
border-right: 2px solid #283ba6;
}

/*==============================================*/

.box-section {
display: flex;
justify-content: space-between;
margin: 0 auto;
}

.box {
flex: 0 0 48%;
}

.box img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}

/* スマートフォン用のスタイル */
@media screen and (max-width: 767px) {

.box-section {
display: block;
margin: 20px 0;
}

.box {
flex:none;
margin: 2rem auto;
}
}