@charset "utf-8";
/* CSS Document */
/*-------------------------
コンテンツ
-------------------------*/
#main {background-color: #f7e7e6;}
.flex.mainBox{align-items: stretch;}

.autumnWrap,
/*.winterWrap{width: 50%;}

.autumnWrap{background:#fbdec2; }
.winterWrap{background:#d3eef0;}*/

.item-reverse{flex-flow: row-reverse;}
.item-row{flex-flow: row;}
.listTtl, .listTtl02{padding: 15px 30px;}
.listTtl02{margin-top: 20px;}
.listTtl h3,
.listTtl02 h3{text-align: center;}
.listTtl02 h3{padding-top: 20px; border-top: 2px dotted #aeaeae;}
@media screen and (max-width: 960px){
}

@media screen and (max-width: 640px){
	.autumnWrap,
	.winterWrap{width: 100%;}
}


/*---------------------------------------------------------------

 headerImg

--------------------------------------------------------------- */
#headerImg {margin-bottom: 60px; text-align: center;}
#headerImg figure:nth-child(2) {margin-top: 100px;}
#headerImg h3{margin: 30px auto;}
#headerImg h3 span {color: #e89044; border-bottom: 2px solid #e89044; font-size: 24px;}
#headerImg h3 small{border-top: 1px solid #000000;border-bottom: 1px solid #000000;width: 100%;display: block;}
#headerImg p {text-align: left;}
#headerImg p span {color: #e89044; font-size: 42px;}
#headerImg .txt_area {margin-bottom: 50px;}
@media screen and (max-width: 960px){
}

@media screen and (max-width: 640px){
	#headerImg p span {font-size: 32px;}
    #headerImg .txt_area {margin-bottom: 30px;}
}



/*-------------------------

kansyu

-------------------------*/
#contents_kansyu{padding: 20px; margin-top: 20px;}
#contents_kansyu .inner{display: flex; justify-content: space-between; align-items: center; padding: 10px 30px 0;}

#contents_kansyu .item_left{width: 30%; padding-right: 20px;}

#contents_kansyu .item_right{width: 70%; border-left: 1px solid #333333; padding-left: 20px;
    display: flex; justify-content: space-around; align-items: center;}
#contents_kansyu .item_right h4{width: 50%;}
#contents_kansyu .item_right figure{width: 80%;}

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

@media screen and (max-width: 640px){
    #contents_kansyu{padding: 20px; margin-top: 0;}
    #contents_kansyu .inner{display: block; padding: 0; border-top: none;}

    #contents_kansyu .item_left{width: 100%; display: block; text-align: center; padding: 0;}
    #contents_kansyu .item_left p {text-align: left; font-size: 12px;}
    #contents_kansyu .item_right h4{width: 100%; text-align: center; margin-bottom: 10px;}
    #contents_kansyu .item_right figure{width: 100%;}

    #contents_kansyu .item_right{width: 100%; border-left:none; padding-left: 0;
	border-top: 1px solid #333333;margin-top: 15px; padding-top: 15px; text-align: center;}
}



/*---------------------------------------------------------------

 presents

--------------------------------------------------------------- */
#presents {margin-top: 50px;}
#presents .item_left {width: 35%;}
#presents .item_right {width: 65%; padding-left: 25px;}
.presents_contents {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    line-height: 1.4; border: 1px solid #e85b04; padding: 15px 30px;}

#presents .item_left {}
#presents .item_left_inner {display: flex; margin-bottom: 10px; align-items: center;}
#presents .item_left .item_left_img {}

#presents .item_left_inner p {color: #cb7986; padding-left: 10px;}
#presents .item_left_inner p span {font-size: 11px;}

#presents .item_right {text-align: center;}

#presents .item_right h3 {position: relative; font-size: 17px; font-weight: bold; color: #cb7986; line-height: 1.3; margin: 0 auto 15px;}
#presents .item_right h3:before, #presents .item_right h3:after {position: relative; display: inline-block; content: ""; background: #cb7986; width: 1px; height: 1.3em; margin: 0 0.5em; margin-top: -.1em; vertical-align: middle;}
#presents .item_right h3:before {transform: rotate(-35deg);}
#presents .item_right h3:after {transform: rotate(35deg);}

#presents .textflex {display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;}
#presents .textflex h5 {font-size: 16px;}

#presents .item_right p {text-align: left; line-height: 2;}
#presents .item_right p span {text-align: right; color: #e85b04;}

#presents .item_right .oubobtn {text-align: center; padding-top: 20px;}
#presents .item_right .oubobtn p{text-align: center;}
#presents .item_right .oubobtn_wrap {display: inline-block; margin: 0 auto 15px;}

@media screen and (max-width: 960px){
    #presents .item_right h3{letter-spacing: 0; font-size: 16px;}
    #presents .textflex h5{font-size: 13px;}
}

@media screen and (max-width: 640px){
    #presents {margin-top: 40px;}

   .presents_contents {display: block; padding: 30px 15px;}

    #presents .item_left {width: 100%; text-align: center; padding-bottom: 25px;}
    #presents .item_left .item_left_img {left: -5px;}

    #presents .item_right {width: 100%; padding: 0;}

    #presents .textflex {display:block; text-align: left;}
}


/*---------------------------------------------------------------

 question

--------------------------------------------------------------- */
.question_wrap {margin-top: 40px;}
.question_wrap .sec_mainTtl{display: table; background-color: #72c8c3; border-radius: 1rem; margin: 0 auto 20px;  width: 100%;}
.question_wrap .sec_mainTtl h3 {text-align: center; font-size: 22px; letter-spacing: 3px; position: relative;}
.question_wrap .sec_mainTtl img {position: absolute; top: -40px; right: 30%;}

.question_box {align-items: start; width: 100%; padding: 15px 0; border-bottom: 1px solid #333;}
.question_box .question_left {width: 8%;}
.question_box .question_right {width: 91%;}
.question_box .question_right h4 {font-size: 20px; color: #00b0ac; line-height: 1.5; margin-bottom: 10px;}
.question_box .question_right h4 span {font-size: 24px;}

.question_txt {margin-top: 5px; text-align: right; font-size: 13px;}

@media screen and (max-width: 960px){
    .question_wrap .sec_mainTtl img {right: 25%;}
}


@media screen and (max-width: 640px){
    .question_wrap .sec_mainTtl h3 {font-size: 16px;}
    .question_wrap .sec_mainTtl img {width: 8%; top: -35px; right: 9%;}
    .question_wrap .sec_mainTtl {margin: 0 auto 15px;}

    .question_box .question_right h4 {font-size: 16px; margin-left: 10px;}
    .question_box .question_right h4 span {font-size: 16px;}

}

/*---------------------------------------------------------------

 infoSite

--------------------------------------------------------------- */
.infoSite_wrap {margin-top: 40px;}
.infoSite_wrap .sec_mainTtl{display: table; text-align: center; color: #fff; font-size: 22px; letter-spacing: 3px;
    background-color: #CA80B3; border-radius: 3rem; margin: 0 auto 10px; position: relative; width: 100%;}

.sec_mainTtl + p{text-align: center; font-size: 18px; margin-bottom: 15px;}

.infoiList{}
.infoiList .itemline{width: 1px;background: #000000;}
.infoiList .itemBox{width: 46%; align-items:start;}
.infoiList .itemBox .web_box {width: 10%;}
.infoiList .itemBox .text_box {width: 80%;}

.infoiList .itemBox .web_box {background-color: #E2BEDA; width: 75px; height: 75px; border-radius: 50%;
    font-size: 16px; line-height: 1; font-weight: bold; display: flex; justify-content: center; align-items: center; text-align: center;}
.infoiList .itemBox .text_box .text_box_link,.infoiList .itemBox .text_box .text_box_logo_flex {display: flex; justify-content: space-between; align-items: center;}
.infoiList .itemBox .text_box h4{font-size: 20px; line-height: 1;}
.infoiList .itemBox .text_box h5{}

.infoiList .itemBox .text_box .text_box_link {margin-bottom: 5px;}
.infoiList .itemBox .text_box .text_box_link .text_box_logo {width: 85%;}
.infoiList .itemBox .text_box .text_box_link .QR_box {width: 13%;}

.infoiList .itemBox .text_box .text_box_link .logo_box02 {width: 50%;}

.item_line {
		flex-grow: 1; /*--幅を指定--*/
		position: relative; /*--positionを追加--*/
		margin-right: 5%;
}

.item_line::after {
	position: absolute;
	top: 0;
	left: 100%;
	margin: 0 4%;
	content: "";
	width: 1px; /*--縦線の太さ(幅)--*/
	height: 100%;
	background-color: #333;
}


@media screen and (max-width: 960px){
    .infoiList .itemBox .text_box {width: 100%;}
    .infoiList .itemBox .web_box {margin-bottom: 10px;}
}


@media screen and (max-width: 640px){
.infoSite_wrap .sec_mainTtl{font-size: 17px; text-align: center;letter-spacing: 0px;}
.sec_mainTtl + p{font-size: 14px;}	

.infoiList .itemBox{width: 100%; margin: 15px auto; padding-bottom: 15px;}
.infoiList .itemBox .text_box h4{font-size: 17px;}
.item_line {margin-right: 0; border-bottom: 1px solid #333333;}
.item_line::after {display: none;}	
}