@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* ------------------------
 権威：ふきだし
------------------------ */
.chat_r,
.chat_l {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 24px 0;
}

.chat_r {
	justify-content: flex-start;
}

.chat_l {
	justify-content: flex-start;
	flex-direction: row-reverse;
}

.chat_r .talker,
.chat_l .talker {
	flex: 0 0 auto;
	width: 72px;
}

.chat_r .talker img,
.chat_l .talker img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.chat_r .bubble_wrap,
.chat_l .bubble_wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.chat_r .bubble,
.chat_l .bubble {
	position: relative;
	display: inline-block;
	max-width: 760px;
	width: auto;
	padding: 16px 18px;
	border-radius: 16px;
	line-height: 1.85;
	background: #f7f8fa;
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.chat_r .bubble:before,
.chat_l .bubble:before {
	content: "";
	position: absolute;
	top: 18px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
}

.chat_r .bubble:before {
	left: -18px;
	border-right-color: rgba(0,0,0,.08);
}

.chat_r .bubble:after {
	content: "";
	position: absolute;
	top: 19px;
	left: -16px;
	width: 0;
	height: 0;
	border: 9px solid transparent;
	border-right-color: #f7f8fa;
}

.chat_l .bubble:before {
	right: -18px;
	border-left-color: rgba(0,0,0,.08);
}

.chat_l .bubble:after {
	content: "";
	position: absolute;
	top: 19px;
	right: -16px;
	width: 0;
	height: 0;
	border: 9px solid transparent;
	border-left-color: #f7f8fa;
}

.chat_r .bubble_in,
.chat_l .bubble_in {
	font-size: 16px;
}

.chat_r .bubble_in p,
.chat_l .bubble_in p {
	margin: 0 0 12px;
}

.chat_r .bubble_in p:last-child,
.chat_l .bubble_in p:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.chat_r,
	.chat_l {
		gap: 12px;
	}

	.chat_r .talker,
	.chat_l .talker {
		width: 56px;
	}

	.chat_r .talker img,
	.chat_l .talker img {
		width: 56px;
		height: 56px;
	}

	.chat_r .bubble,
	.chat_l .bubble {
		max-width: 100%;
		padding: 14px 16px;
	}
}

/* ------------------------
 権威：フォント
------------------------ */
/*フォントの装飾*/
.b{ font-weight: bold!important; }/*太字*/
.normal{ font-weight: normal!important; }/*太字を解除*/


/*フォントサイズの設定*/
.big{ font-size: 1.2em!important; }
.big2{ font-size: 1.5em!important; }
.big3{ font-size: 1.8em!important; }
.small{ font-size: 0.8em!important; }

.f08em{ font-size: 0.8em!important; }
.f09em{ font-size: 0.9em!important; }
.f10em{ font-size: 1.0em!important; }
.f11em{ font-size: 1.1em!important; }
.f12em{ font-size: 1.2em!important; }
.f13em{ font-size: 1.3em!important; }
.f14em{ font-size: 1.4em!important; }
.f15em{ font-size: 1.5em!important; }
.f16em{ font-size: 1.6em!important; }
.f17em{ font-size: 1.7em!important; }
.f18em{ font-size: 1.8em!important; }
.f19em{ font-size: 1.9em!important; }
.f20em{ font-size: 2.0em!important; }
.f21em{ font-size: 2.1em!important; }
.f22em{ font-size: 2.2em!important; }
.f23em{ font-size: 2.3em!important; }
.f24em{ font-size: 2.4em!important; }
.f25em{ font-size: 2.5em!important; }
.f26em{ font-size: 2.6em!important; }
.f27em{ font-size: 2.7em!important; }
.f28em{ font-size: 2.8em!important; }
.f29em{ font-size: 2.9em!important; }
.f30em{ font-size: 3.0em!important; }

.f08rem{ font-size: 0.8rem!important; }
.f09rem{ font-size: 0.9rem!important; }
.f10rem{ font-size: 1.0rem!important; }
.f11rem{ font-size: 1.1rem!important; }
.f12rem{ font-size: 1.2rem!important; }
.f13rem{ font-size: 1.3rem!important; }
.f14rem{ font-size: 1.4rem!important; }
.f15rem{ font-size: 1.5rem!important; }
.f16rem{ font-size: 1.6rem!important; }
.f17rem{ font-size: 1.7rem!important; }
.f18rem{ font-size: 1.8rem!important; }
.f19rem{ font-size: 1.9rem!important; }
.f20rem{ font-size: 2.0rem!important; }
.f21rem{ font-size: 2.1rem!important; }
.f22rem{ font-size: 2.2rem!important; }
.f23rem{ font-size: 2.3rem!important; }
.f24rem{ font-size: 2.4rem!important; }
.f25rem{ font-size: 2.5rem!important; }
.f26rem{ font-size: 2.6rem!important; }
.f27rem{ font-size: 2.7rem!important; }
.f28rem{ font-size: 2.8rem!important; }
.f29rem{ font-size: 2.9rem!important; }
.f30rem{ font-size: 3.0rem!important; }

.f10px{ font-size: 10px!important; }
.f11px{ font-size: 11px!important; }
.f12px{ font-size: 12px!important; }
.f13px{ font-size: 13px!important; }
.f14px{ font-size: 14px!important; }
.f15px{ font-size: 15px!important; }
.f16px{ font-size: 16px!important; }
.f17px{ font-size: 17px!important; }
.f18px{ font-size: 18px!important; }
.f19px{ font-size: 19px!important; }
.f20px{ font-size: 20px!important; }
.f21px{ font-size: 21px!important; }
.f22px{ font-size: 22px!important; }
.f23px{ font-size: 23px!important; }
.f24px{ font-size: 24px!important; }

/* カラー */
.red{ color: #e00000!important; }/*赤*/
.blue{ color: #0329ce!important; }/*青*/
.green{ color: #01995e!important; }/*緑*/
.yellow{ color: #ffe400!important; }/*黄*/
.navy{ color: #133d94!important; }/*紺*/
.orange{ color: #eca100!important; }/*橙*/
.pink{ color: #eb67b5!important; }/*ピンク*/
.purple{ color: #9940d2!important; }/*紫*/
.olive{ color: #9bb814!important; }/*オリーブ*/
.lime{ color: #2abe0d!important; }/*黄緑*/
.aqua{ color: #0baedd!important; }/*水色*/
.black{ color: #000!important; }/*黒*/
.gray{ color: #999!important; }/*灰*/
.white{ color: #fff!important; }/*白*/
.brown{ color: #4b1c1c!important; }/*茶*/


/*マーカー表示
背景に着色、「box-xx」から変更*/
.line-blue{ background: linear-gradient(transparent 50%, #9ddff1 50%); }/*青*/
.line-yellow{ background: linear-gradient(transparent 50%, #fff499 50%); }/*黄*/
.line-orange{ background: linear-gradient(transparent 50%, #f7d999 50%); }/*橙*/
.line-pink{ background: linear-gradient(transparent 50%, #f7c2e1 50%); }/*ピンク*/
.line-lime{ background: linear-gradient(transparent 50%, #aae59e 50%); }/*黄緑*/
.line-gray{ background: linear-gradient(transparent 50%, #d6d6d6 50%); }/*灰*/

/* ------------------------
 権威：ボックス
------------------------ */
/*アイテムボックス*/
.item-box{
    margin: 40px 0;
    padding: 10px;
    background-color: #f0f0f0;
}

.item-box .item-box_title{
    margin-top: 15px;
    margin-bottom: 15px;
    /*color: #00858a;*/
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.0;
}

.item-box .item-box_desc{
    overflow: hidden;
}

.item-box .item-box_thumb{
    display: block;
    margin-bottom: 10px;
    text-align: center;
}


/*アイテムボックス02*/
.item-box02{
    margin: 40px 0;
    padding: 6px;
    background-image: linear-gradient(
            -45deg,
            #fff 25%,
            #05a5ab 25%, #05a5ab 50%,
            #fff 50%, #fff 75%,
            #05a5ab 75%, #05a5ab
    );
    background-size: 4px 4px;
    background-repeat: repeat;
}

.item-box02 .item-box_inner{
    position: relative;
    padding: 12px;
    /*background-color: #e8f7f7;*/
}

.item-box02 .item-box_title{
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    /*background-color: #05a5ab;*/
    color: #fff;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.2;
    text-align: center;
}

.item-box02 .item-box_thumb{
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

.item-box02 .item-data_sec{
    margin-bottom: 15px;
    padding: 25px;
    background: #fff;
}


/*アイテムボックス03*/
.item-box03 .item-box_inner{
    padding: 12px;
    border: 1px solid #ddd;
}

.item-box03 .item-box_title{
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
    /*background-color: #05a5ab;*/
    color: #fff;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.2;
    text-align: center;
}

.item-box03_thumb{
    margin-bottom: 20px;
    text-align: center;
}

.item-box03_cont{
    line-height: 1.8;
}

.btn-detail_wrap{
    clear: both;
    max-width: 650px;
    margin: auto;
    margin-top: 20px;
}

.btn-detail_col{
    text-align: center;
}

.btn-detail_left{
    float: left;
}

.btn-detail_right{
    float: right;
}


/*装飾ボックス*/
.box_style{
    margin: 0 0 30px;
    font-size: 1.1rem;
}

.box_style p:last-child{
    margin-bottom: 0;
}


/*ストライプの枠線*/
.box_style01{
    padding: 6px;
    background-image: linear-gradient(
            -45deg,
            #fff 25%,
            #05a5ab 25%, #05a5ab 50%,
            #fff 50%, #fff 75%,
            #05a5ab 75%, #05a5ab
    );
    background-size: 4px 4px;
    background-repeat: repeat;
}

.box_style01 .box_inner{
    padding: 10px;
    /*background-color: #e8f7f7;*/
}

.box_style02{
    padding: 6px;
    background-image: linear-gradient(
            -45deg,
            #fff 25%,
            #999999 25%, #999999 50%,
            #fff 50%, #fff 75%,
            #999999 75%, #999999
    );
    background-size: 4px 4px;
    background-repeat: repeat;
}

.box_style02 .box_inner{
    padding: 10px;
    background-color: #fff;
}

.box_style02 li{
    line-height: 2em;
}

.box_style03{
    padding: 16px;
    /*background: #e8f7f7;*/
}

.box_style04{
    padding: 16px;
    background: #f0f0f0;
}

.box_style05{
    padding: 16px;
    background: #333333;
    color: #fff;
}


/*ストライプの背景*/
.box_style06{
    padding: 16px;
    background-image: linear-gradient(
            -45deg,
            #fff 25%,
            #eff9f9 25%, #eff9f9 50%,
            #fff 50%, #fff 75%,
            #eff9f9 75%, #eff9f9
    );
    background-size: 4px 4px;
    background-repeat: repeat;
    /*background-color: #e8f7f7;*/
}


/*画像背景*/
.box_style07{
    padding: 10px;
    background: url(./images/sample011.jpg) center center;
    background-size: cover;
}

.box_style07 .box_inner{
    padding: 10px;
    background-color: rgba(255,255,255,0.7);
}


/*カラーボックス*/
.box_style_blue,
.box_style_green,
.box_style_orange,
.box_style_red,
.box_style_pink,
.box_style_yellow,
.box_style_gray{
    margin-bottom: 30px;
    padding: 6px;
    background-size: 4px 4px;
    background-repeat: repeat;
    font-size: 1.4rem;
}

.box_style_blue .box_inner,
.box_style_green .box_inner,
.box_style_orange .box_inner,
.box_style_red .box_inner,
.box_style_pink .box_inner,
.box_style_yellow .box_inner,
.box_style_gray .box_inner{ padding: 15px; }

.box_style_blue .box_style_title,
.box_style_green .box_style_title,
.box_style_orange .box_style_title,
.box_style_red .box_style_title,
.box_style_pink .box_style_title,
.box_style_yellow .box_style_title,
.box_style_gray .box_style_title{
    margin: -8px 0 5px -27px;
    color: #fff;
    line-height: 1.4;
}

.box_style_title span{
    position: relative;
    display: inline-block;
    padding: 5px 10px;
}

.box_style_title span::before{
    position: absolute;
    top: 100%;
    left: 0;
    height: 0;
    width: 0;
    border: 3px solid transparent;
    border-top-color: #d6d6d6;
    border-right-color: #d6d6d6;
    content: "";
}


/*カラーボックス（青）*/
.box_style_blue{
    background-image: linear-gradient(
            -45deg,
            #fff 25%,
            #0baedd 25%, #0baedd 50%,
            #fff 50%, #fff 75%,
            #0baedd 75%, #0baedd
    );
}
.box_style_blue .box_inner{ background-color: #f8fdff; }
.box_style_blue .list_style02 li::before,
.box_style_blue .box_style_title span{ background-color: #0baedd;}


/*カラーボックス（緑）*/
.box_style_green{
    background-image: linear-gradient(
            -45deg,
            #fff 25%,
            #5bc130 25%, #5bc130 50%,
            #fff 50%, #fff 75%,
            #5bc130 75%, #5bc130
    );
}
.box_style_green .box_inner{ background-color: #f9fff3; }
.box_style_green .list_style02 li::before,
.box_style_green .box_style_title span{ background-color: #5bc130;}


/*カラーボックス（橙）*/
.box_style_orange{
    background-image: linear-gradient(
            -45deg,
            #fff 25%,
            #fca60d 25%, #fca60d 50%,
            #fff 50%, #fff 75%,
            #fca60d 75%, #fca60d
    );
}
.box_style_orange .box_inner{ background-color: #fdf9f1; }
.box_style_orange .list_style02 li::before,
.box_style_orange .box_style_title span{ background-color: #fca60d; }


/*カラーボックス（赤）*/
.box_style_red{
    background-image: linear-gradient(
            -45deg,
            #fff 25%,
            #d94b59 25%, #d94b59 50%,
            #fff 50%, #fff 75%,
            #d94b59 75%, #d94b59
    );
}
.box_style_red .box_inner{ background-color: #fff8f9; }
.box_style_red .list_style02 li::before,
.box_style_red .box_style_title span{ background-color: #d94b59; }


/*カラーボックス（ピンク）*/
.box_style_pink{
    background-image: linear-gradient(
            -45deg,
            #fff 25%,
            #f48cc0 25%, #f48cc0 50%,
            #fff 50%, #fff 75%,
            #f48cc0 75%, #f48cc0
    );
}
.box_style_pink .box_inner{ background-color: #fffafd; }
.box_style_pink .list_style02 li::before,
.box_style_pink .box_style_title span{ background-color: #f48cc0; }


/*カラーボックス（黄）*/
.box_style_yellow{
    background-image: linear-gradient(
            -45deg,
            #fff 25%,
            #f2cb0c 25%, #f2cb0c 50%,
            #fff 50%, #fff 75%,
            #f2cb0c 75%, #f2cb0c
    );
}
.box_style_yellow .box_inner{ background-color: #fffdf3; }
.box_style_yellow .list_style02 li::before,
.box_style_yellow .box_style_title span{ background-color: #f2cb0c; }


/*カラーボックス（灰色）*/
.box_style_gray{
    background-image: linear-gradient(
            -45deg,
            #fff 25%,
            #999999 25%, #999999 50%,
            #fff 50%, #fff 75%,
            #999999 75%, #999999
    );
}
.box_style_gray .box_inner{ background-color: #fafafa; }
.box_style_gray .list_style02 li::before,
.box_style_gray .box_style_title span{ background-color: #999999; }