@charset "utf-8";
/* CSS Document */



/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-- テキストの設定               　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　                       　　--*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.te-left { text-align: left;}      /* 文字の左寄せ */
.te-center { text-align: center;}  /* 文字のセンタリング */
.te-right { text-align: right;}    /* 文字の右寄せ */

@media only screen and (max-width : 768px ){
.xs-te-left { text-align: left;}        /* 文字のセンタリング 768px以下で左寄せ */
.xs-te-center { text-align: center;}    /* 文字の右寄せ 768px以下でセンタリング */
.xs-te-right { text-align: right;}      /* 文字のセンタリング 768px以下で左寄せ */
}



/*---------------------------------------------------------*/
/*-- 文字設定                                            --*/
/*---------------------------------------------------------*/

/*-- 文字サイズ -----*/
.f6px  { font-size: 6px; font-size: 0.6rem; }   /* font8px */
.f7px  { font-size: 7px; font-size: 0.7rem; }   /* font8px */
.f8px  { font-size: 8px; font-size: 0.8rem; }   /* font8px */
.f9px  { font-size: 9px; font-size: 0.9rem; }   /* font9px */
.f10px { font-size: 10px; font-size: 1.0rem; }  /* font10px */
.f11px { font-size: 11px; font-size: 1.1rem; }  /* font11px */
.f12px { font-size: 12px; font-size: 1.2rem; }  /* font12px */
.f13px { font-size: 13px; font-size: 1.3rem; }  /* font13px */
.f14px { font-size: 14px; font-size: 1.4rem; }  /* font14px */
.f15px { font-size: 15px; font-size: 1.5rem; }  /* font15px */
.ft16px { font-size: 16px; font-size: 1.6rem; }  /* font16px */
.f17px { font-size: 17px; font-size: 1.7rem; }  /* font17px */
.ft18px { font-size: 18px; font-size: 1.8rem; }  /* font18px */
.f19px { font-size: 19px; font-size: 1.9rem; }  /* font19px */
.f20px { font-size: 20px; font-size: 2.0rem; }  /* font20px */

 @media only screen and (max-width : 768px ){
.xs-f6px  { font-size: 6px; font-size: 0.6rem; }   /* font8px */
.xs-f7px  { font-size: 7px; font-size: 0.7rem; }   /* font8px */
.xs-f8px  { font-size: 8px; font-size: 0.8rem; }   /* font8px */
.xs-f9px  { font-size: 9px; font-size: 0.9rem; }   /* font9px */
.xs-f10px { font-size: 10px; font-size: 1.0rem; }  /* font10px */
.xs-f11px { font-size: 11px; font-size: 1.1rem; }  /* font11px */
.xs-f12px { font-size: 12px; font-size: 1.2rem; }  /* font12px */
.xs-f13px { font-size: 13px; font-size: 1.3rem; }  /* font13px */
.xs-f14px { font-size: 14px; font-size: 1.4rem; }  /* font14px */
.xs-f15px { font-size: 15px; font-size: 1.5rem; }  /* font15px */ 
.xs-f16px { font-size: 16px; font-size: 1.6rem; }  /* font16px */
.xs-f17px { font-size: 17px; font-size: 1.7rem; }  /* font17px */
.xs-f18px { font-size: 18px; font-size: 1.8rem; }  /* font18px */
.xs-f19px { font-size: 19px; font-size: 1.9rem; }  /* font19px */
.xs-f20px { font-size: 20px; font-size: 2.0rem; }  /* font20px */
 }
 
 @media only screen and (max-width : 568px ){
.xss-f6px  { font-size: 6px; font-size: 0.6rem; }   /* font8px */
.xss-f7px  { font-size: 7px; font-size: 0.7rem; }   /* font8px */
.xss-f8px  { font-size: 8px; font-size: 0.8rem; }   /* font8px */
.xss-f9px  { font-size: 9px; font-size: 0.9rem; }   /* font9px */
.xss-f10px { font-size: 10px; font-size: 1.0rem; }  /* font10px */
.xss-f11px { font-size: 11px; font-size: 1.1rem; }  /* font11px */
.xss-f12px { font-size: 12px; font-size: 1.2rem; }  /* font12px */
.xss-f13px { font-size: 13px; font-size: 1.3rem; }  /* font13px */
.xss-f14px { font-size: 14px; font-size: 1.4rem; }  /* font14px */
.xss-f15px { font-size: 15px; font-size: 1.5rem; }  /* font15px */ 
.xss-f16px { font-size: 16px; font-size: 1.6rem; }  /* font16px */
.xss-f17px { font-size: 17px; font-size: 1.7rem; }  /* font17px */
.xss-f18px { font-size: 18px; font-size: 1.8rem; }  /* font18px */
.xss-f19px { font-size: 19px; font-size: 1.9rem; }  /* font19px */
.xss-f20px { font-size: 20px; font-size: 2.0rem; }  /* font20px */
 }



/*---------------------------------------------------------*/
/*-- ボックスの設定                                　      --*/
/*---------------------------------------------------------*/

.strong { font-weight: bold;}        /* 太字 */
.clear-both { clear: both; }         /* 回り込み禁止 */
.float-left { float: left; }         /* 左寄せ */
.float-right { float: right; }       /* 右寄せ */

.block { display: block;}
.none  { display: none;}

.rds3px { border-radius: 3px; }   /* 角丸3px  */
.rds5px { border-radius: 5px; }   /* 角丸5px  */
.rds7px { border-radius: 7px; }   /* 角丸7px  */
.rds15px { border-radius: 15px; } /* 角丸15px */
.rds20px { border-radius: 20px; } /* 角丸20px */
.rds25px { border-radius: 25px; } /* 角丸25px */
.rds30px { border-radius: 30px; } /* 角丸30px */

/* ボーダーとパッディング値を含める */
.border-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }



/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-- リンクの各ページ共通設定                                                                                                                                                     --*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*-------------*/
/* リンクの設定  */
/*-------------*/
/*-- リンクの設定 下線なし --*/
.link_01 { padding: 0 3px; display: inline-block; transition: .3s; color: #0054FF !important; }
/*-- リンクの設定 下線あり --*/
.link_02 { padding: 0 3px; display: inline; transition: .3s; color: #0054FF !important; border-bottom: 1px dotted #0054FF; }
/*-- リンクの設定 動く下線 --*/
.link_03 { position: relative; padding: 0 3px; display: inline-block; transition: .3s; color: #0054FF !important; }
.link_03:after, .link_03::before { content: ''; }
.link_03::before { position: absolute; bottom: 3px; width: 100%; border-bottom: 1px dotted #0054FF; }
.link_03::after { position: absolute; bottom: 3px; left: 50%; width: 0; height: 1px; background-color: #0054FF !important; transition: .3s; transform: translateX(-50%); }
.link_03:hover::after,.link_03:active::after,.link_03:focus::after { width: 100%; }



/*-----------------*/
/*-- ボタンの設定  --*/
/*-----------------*/

/*-- ボタンを乗せると丸くなる --*/
.button_01 a:link, .button_01 a:visited {
    width: 100%;
    padding: 10px 0;
    display: block;
    color: #fff;
    text-align: center;
    background-color: #0024FF;
    border: 2px solid #0024FF;
    border-radius: 3px;
    -webkit-transition: all .3s;
    transition: all .3s;
    position: relative;
}
.button_01 a:hover, .button_01 a:active, .button_01 a:focus {
    background-color: transparent;
    border: 2px solid #0024FF;
    color: #0024FF;
    border-radius: 30px;
	opacity: 1.0;
}
.button_01 a:after {
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    padding-left: 10px;
    font-weight: 900;
    position: absolute;
	top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


/*:: ボタン観音開き ::*/
.button_folding {}
.button_folding a:link, .button_folding a:visited { padding: 10px 40px 10px 20px; position: relative; display: inline-block; color: #333; }
.button_folding a:link, .button_folding a:visited { background-color: #FFF; border: 2px solid #3E83FF; z-index: 2; border-radius: 3px}
.button_folding a:hover, .button_folding a:active, .button_folding a:focus { color: #FFF; background-color: #3E83FF; border-color: #3E83FF; }
.button_folding a::before, .button_folding a::after { width: 50%; height: 100%; position: absolute; top: 0; display: block; background-color: #FFF; content: ''; z-index: -1; }
.button_folding a, .button_folding a::before, .button_folding a::after { -webkit-transition: all .3s; transition: all .3s; }
.button_folding a::before { right: 0;}
.button_folding a::after { left: 0;}
.button_folding a:hover::before, .button_folding a:hover::after { width: 0; background-color: #FFF;}
.button_folding span { position: absolute; right: 10px;font-weight: bold; }
@media only screen and (max-width : 768px ){ .button_folding a:link, .button_folding a:visited { width: 100%; } }


/*-------------*/
/* 区切り線の設定 */
/*-------------*/


hr.sdgs{
  background-image: -webkit-gradient(linear-gradient(to right, red,goldenrod,green,darkred,deepskyblue,gold,maroon,deeppink,goldenrod,darkolivegreen,royalblue,limegreen,midnightblue));
  background-image: -webkit-linear-gradient(to right, red,goldenrod,green,darkred,deepskyblue,gold,maroon,deeppink,goldenrod,darkolivegreen,royalblue,limegreen,midnightblue);
  background-image: linear-gradient(to right, red,goldenrod,green,darkred,deepskyblue,gold,maroon,deeppink,goldenrod,darkolivegreen,royalblue,limegreen,midnightblue);
  height: 3px;
  margin: 0 auto 10px auto;
}







/*-----------------------*/
/* コンテンツの枠の設定     */
/*-----------------------*/

/* グレーの囲み枠線 */
.row-contents-waku-glay1px { display: block; height: 100%; width: 100%; margin-bottom: 20px; padding: 2%; border: 1px solid #C0C0C0; border-radius: 3px; background-color: #FFFFFF; overflow-y: hidden; /*-- 高さ認識対策 --*/ }
.row-contents-waku-glay1px hr.ma40-0 { margin: 40px 0 40px 0; display: block;}
.row-contents-waku-glay1px hr.ma30-0 { margin: 30px 0 30px 0; display: block;}
.row-contents-waku-glay1px hr.ma20-0 { margin: 20px 0 20px 0; display: block;}
.row-contents-waku-glay1px hr.ma10-0 { margin: 10px 0 10px 0; display: block;}

/* 囲み枠線 背景なし*/
.row-contents-waku-bg-none-1px { display: block; height: 100%; width: 100%; margin-bottom: 20px; padding: 2%; border: 1px solid #C0C0C0; border-radius: 3px; }
.row-contents-waku-bg-none-1px hr.ma40-0 { margin: 40px 0 40px 0; display: block;}
.row-contents-waku-bg-none-1px hr.ma30-0 { margin: 30px 0 30px 0; display: block;}
.row-contents-waku-bg-none-1px hr.ma20-0 { margin: 20px 0 20px 0; display: block;}
.row-contents-waku-bg-none-1px hr.ma10-0 { margin: 10px 0 10px 0; display: block;}

/* 枠線なし */
.row-contents-waku-none { display: block; height: 100%; width: 100%; margin-bottom: 20px; padding: 2%; background-color: #FFFFFF; }
.row-contents-waku-none hr.ma40-0 { margin: 40px 0 40px 0; display: block;}
.row-contents-waku-none hr.ma30-0 { margin: 30px 0 30px 0; display: block;}
.row-contents-waku-none hr.ma20-0 { margin: 20px 0 20px 0; display: block;}
.row-contents-waku-none hr.ma10-0 { margin: 10px 0 10px 0; display: block;}

/* 枠線なし_背景なし */
.row-contents-waku-bg-none-0 { display: block; height: 100%; width: 100%; margin-bottom: 20px; padding: 2%; }
.row-contents-waku-bg-none-0 hr.ma40-0 { margin: 40px 0 40px 0; display: block;}
.row-contents-waku-bg-none-0 hr.ma30-0 { margin: 30px 0 30px 0; display: block;}
.row-contents-waku-bg-none-0 hr.ma20-0 { margin: 20px 0 20px 0; display: block;}
.row-contents-waku-bg-none-0 hr.ma10-0 { margin: 10px 0 10px 0; display: block;}

/* 枠線、背景、paddingなし */
.row-contents-in-waku { display: block; height: 100%; width: 100%; margin-bottom: 20px; }











/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-- チャットデザイン                                                                                                                                                         --*/
/*--                                                                                                                                                                          --*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.row-chat-waku { display: block; width: 100%; margin-bottom: 40px; }

/*---------------------*/
/* チャットデザイン 左 */
/*---------------------*/
.chat-left { width: 100%; margin: 0 auto 20px auto; overflow: hidden; }
.chat-left .faceicon { width: 55px; float: left; display: block; margin-left: 1%; }
.chat-left .faceicon img{ width: 100%; height: auto; border: solid 3px #d7ebfe; border-radius: 50%; }
.chat-left .faceicon span { float: left; display: block; clear: both; text-align: center; width: 100%; font-size: 12px; color: #606060; }
.says-left { display: block; float: left; width: -webkit-calc(93% - 55px); width: calc(93% - 55px); max-width: -webkit-calc(93% - 55px); max-width: calc(93% - 55px); position: relative; margin-left: 5%; margin-right: 1%; padding: 3% 2%; border-radius: 8px; background: #d7ebfe; }
.says-left:after { content: ""; display: inline-block; position: absolute; top: 20px; left: -24px; border: 12px solid transparent; border-right: 12px solid #d7ebfe; }

@media only screen and (max-width : 568px ){
.chat-left .faceicon { width: 40px;}
.chat-left .faceicon span {font-size: 10px;}
.says-left { width: -webkit-calc(93% - 40px); width: calc(93% - 40px); max-width: -webkit-calc(93% - 40px); max-width: calc(93% - 40px);}
.says-left:after { top: 26%; left: -20px; border: 10px solid transparent; border-right: 10px solid #d7ebfe;}
}

/*---------------------*/
/* チャットデザイン 右 */
/*---------------------*/
.chat-right { width: 100%; margin: 0 auto 30px auto; overflow: hidden; }
.chat-right .faceicon { width: 55px; float: right; display: block; margin-right: 1%; }
.chat-right .faceicon img{ width: 100%; height: auto; border: solid 3px #d7ebfe; border-radius: 50%; }
.chat-right .faceicon span { float: left; display: block; clear: both; text-align: center; width: 100%; font-size: 12px; color: #606060; }
.says-right { display: block; float: right; width: -webkit-calc(93% - 55px); width: calc(93% - 55px); max-width: -webkit-calc(93% - 55px); max-width: calc(93% - 55px); position: relative; margin-right: 5%; margin-left: 1%; padding: 3% 2%; border-radius: 8px; background: #d7ebfe; }
.says-right:after { content: ""; display: inline-block; position: absolute; top: 20px; right: -24px; border: 12px solid transparent; border-left: 12px solid #d7ebfe; }

@media only screen and (max-width : 568px ){
.chat-right .faceicon { width: 40px;}
.chat-right .faceicon span {font-size: 10px;}
.says-right { width: -webkit-calc(93% - 40px); width: calc(93% - 40px); max-width: -webkit-calc(93% - 40px); max-width: calc(93% - 40px);}
.says-right:after { top: 26%; right: -20px; border: 10px solid transparent; border-left: 10px solid #d7ebfe;}
}