@charset "utf-8";
/* CSS Document  2026.第10回デジタルビジネス推進研究会*/

  /* サイトカラー */
:root {
    --primary-color: rgb(0, 151, 156); /*#00979c*/
    --sab-color: rgb(243, 153, 57);/*f39939*/
    --sab-green-color: rgb(0, 88, 100) ;/*#005864*/
}

/*------------------------------------------------------------
base
-------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, h7, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video ,picture{
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,picture,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
    overflow-y: scroll;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
    font-size: clamp(13px, 2vw, 18px);
  line-height:1.6em;
  font-family:  "Lato","YakuHanJP","Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

_::-webkit-full-page-media, :root, body {
-webkit-animation: safariFix 1s forwards infinite;
}
@-webkit-keyframes safariFix {
    100% {z-index: 1;}
}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

input, textarea{
	margin: 0;
	padding: 0;
}

ol, ul{list-style:none;}

table{
    border-collapse: collapse; 
    border-spacing:0;
}

caption, th{text-align: left;}

a:focus {outline:none;}

sup{
    font-size: 65%;
    vertical-align: top;
    position: relative;
    top: -0.1em;
}

.sup{
	font-size: 75.5%;
    vertical-align: top;
    position: relative;
    top: -0.1em;
}

.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {min-height: 1px;}
* html .clearfix {height: 1px;}

.inline_block {  
	display: inline-block;  
	*display: inline;  
	*zoom: 1;  
}

.dnone{display: none;}

/*------------------------------------------------------------
個別パーツ 
------------------------------------------------------------*/
/*--- 画像 ---*/
img, canvas, iframe, video, svg, picture {
	max-width:100%;
	height: auto;
	vertical-align: middle;
	-ms-interpolation-mode: bicubic;
	border: 0;
    z-index: 2;
}

a img {border: none;}

a img:hover {
	filter: alpha(opacity=70);
	-moz-opacity:0.70;
	opacity:0.70;
}
/*--- 画像 ---*/

/*--- 線 影 ---*/
.border_non {border:none !important;}
.border_nonB {border-bottom:none!important;}

.text-shadow {text-shadow: 1px 1px 3px #000;}
.box-shadow01 {
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}
.box-shadow02{/* 影内側 */
	-moz-box-shadow: inset 1px 1px 3px #000;
	-webkit-box-shadow: inset 1px 1px 3px #000;
	box-shadow: inset 1px 1px 3px #000;
}
/*--- 線 影 ---*/

/*--- 変化
.alpha {
	filter: alpha(opacity=25);
	-moz-opacity:0.25;
	opacity:0.25;
}

.bg-alpha {
	background-color:rgba(255,255,255,0.2);
}

.gradient {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000')";
	background-image: -moz-linear-gradient(top, #ffffff, #000000);
	background-image: -ms-linear-gradient(top, #ffffff, #000000);
	background-image: -o-linear-gradient(top, #ffffff, #000000);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#000000));
	background-image: -webkit-linear-gradient(top, #ffffff, #000000);
	background-image: linear-gradient(top, #ffffff, #000000);
}
変化 ---*/

/*--- box
.leftbox{float:left;}

.rightbox{float:right;}

.nojustify{ text-align:left !important;}
box ---*/
/*------------------------------------------------------------
幅
------------------------------------------------------------*/
.w125{width:145px;}
.w70{width:70px;}
.w300{width:270px;}
.w500{width:500px!important;}
.w600{width:600px;}
.w650{width:650px;}
.w700{width:700px;}
/*------------------------------------------------------------
margin・・・周りのブロックからの距離
-------------------------------------------------------------*/
.m0{ margin: 0!important; }/*周りからのmarginを0に*/
.m0-t{ margin-top: 0!important; }/*上からのmarginを0に*/
.m0-r{ margin-right: 0!important; }/*右からのmarginを0に*/
.m0-b{ margin-bottom: 0!important; }/*下からのmarginを0に*/
.m0-l{ margin-left: 0!important; }/*左からのmarginを0に*/

.m5{ margin: 5px!important; }
.m5-t{ margin-top: 5px!important; }
.m5-r{ margin-right: 5px!important; }
.m5-b{ margin-bottom: 5px!important; }
.m5-l{ margin-left: 5px!important; }

.m10{ margin: 10px!important; }
.m10-t{ margin-top: 10px!important; }
.m10-r{ margin-right: 10px!important; }
.m10-b{ margin-bottom: 10px!important; }
.m10-l{ margin-left: 10px!important; }

.m15{ margin: 15px!important; }
.m15-t{ margin-top: 15px!important; }
.m15-r{ margin-right: 15px!important; }
.m15-b{ margin-bottom: 15px!important; }
.m15-l{ margin-left: 15px!important; }

.m20{ margin: 20px!important; }
.m20-t{ margin-top: 20px!important; }
.m20-r{ margin-right: 20px!important; }
.m20-b{ margin-bottom: 20px!important; }
.m20-l{ margin-left: 20px!important; }

.m25{ margin: 25px!important; }
.m25-t{ margin-top: 25px!important; }
.m25-r{ margin-right: 25px!important; }
.m25-b{ margin-bottom: 25px!important; }
.m25-l{ margin-left: 25px!important; }

.m30{ margin: 30px!important; }
.m30-t{ margin-top: 30px!important; }
.m30-r{ margin-right: 30px!important; }
.m30-b{ margin-bottom: 30px!important; }
.m30-l{ margin-left: 30px!important; }

.m35-b{ margin-bottom: 35px!important; }

.m40{ margin: 40px!important; }
.m40-t{ margin-top: 40px!important; }
.m40-r{ margin-right: 40px!important; }
.m40-b{ margin-bottom: 40px!important; }
.m40-l{ margin-left: 40px!important; }

.m45{ margin: 45px!important; }
.m45-t{ margin-top: 45px!important; }
.m45-r{ margin-right: 45px!important; }
.m45-b{ margin-bottom: 45px!important; }
.m45-l{ margin-left: 45px!important; }

.m50{ margin: 50px!important; }
.m50-t{ margin-top: 50px; }
.m50-r{ margin-right: 50px!important; }
.m50-b{ margin-bottom: 50px!important; }
.m50-l{ margin-left: 50px!important; }

.m60{ margin: 60px!important; }
.m60-t{ margin-top: 60px!important; }
.m60-r{ margin-right: 60px!important; }
.m60-b{ margin-bottom: 60px!important; }
.m60-l{ margin-left: 60px!important; }

.m70{ margin: 70px!important; }
.m70-t{ margin-top: 70px!important; }
.m70-r{ margin-right: 70px!important; }
.m70-b{ margin-bottom: 70px!important; }
.m70-l{ margin-left: 70px!important; }

.m80{ margin: 80px!important; }
.m80-t{ margin-top: 80px!important; }
.m80-r{ margin-right: 80px!important; }
.m80-b{ margin-bottom: 80px!important; }
.m80-l{ margin-left: 80px!important; }

.m90{ margin: 90px!important; }
.m90-t{ margin-top: 90px!important; }
.m90-r{ margin-right: 90px!important; }
.m90-b{ margin-bottom: 90px!important; }
.m90-l{ margin-left: 90px!important; }

.m100{ margin: 100px!important; }
.m100-t{ margin-top: 100px!important; }
.m100-r{ margin-right: 100px!important; }
.m100-b{ margin-bottom: 100px!important; }
.m100-l{ margin-left: 100px!important; }

.m120-t{ margin-top: 120px!important; }
.m130-t{ margin-top: 130px!important; }
.m140-t{ margin-top: 140px!important; }

.m150{ margin: 150px!important; }
.m150-t{ margin-top: 150px!important; }
.m150-r{ margin-right: 150px!important; }
.m150-b{ margin-bottom: 150px!important; }
.m150-l{ margin-left: 150px!important; }

.m250-b{ margin-bottom: 250px!important; }
/*------------------------------------------------------------
padding・・・周りのブロックからの距離（padding）
-------------------------------------------------------------*/
.p0{ padding: 0!important; }
.p0-t{ padding-top: 0!important; }
.p0-r{ padding-right: 0!important; }
.p0-b{ padding-bottom: 0!important; }
.p0-l{ padding-left: 0!important; }

.p5{ padding: 5px!important; }
.p5-t{ padding-top: 5px!important; }
.p5-r{ padding-right: 5px!important; }
.p5-b{ padding-bottom: 5px!important; }
.p5-l{ padding-left: 5px!important; }

.p10{ padding: 10px!important; }
.p10-t{ padding-top: 10px!important; }
.p10-r{ padding-right: 10px!important; }
.p10-b{ padding-bottom: 10px!important; }
.p10-l{ padding-left: 10px!important; }

.p15{ padding: 15px!important; }
.p15-t{ padding-top: 15px!important; }
.p15-r{ padding-right: 15px!important; }
.p15-b{ padding-bottom: 15px!important; }
.p15-l{ padding-left: 15px!important; }

.p20{ padding: 20px!important; }
.p20-t{ padding-top: 20px!important; }
.p20-r{ padding-right: 20px!important; }
.p20-b{ padding-bottom: 20px!important; }
.p20-l{ padding-left: 20px!important; }

.p25{ padding: 25px!important; }
.p25-t{ padding-top: 25px!important; }
.p25-r{ padding-right: 25px!important; }
.p25-b{ padding-bottom: 25px!important; }
.p25-l{ padding-left: 25px!important; }

.p30{ padding: 30px!important; }
.p30-t{ padding-top: 30px!important; }
.p30-r{ padding-right: 30px!important; }
.p30-b{ padding-bottom: 30px!important; }
.p30-l{ padding-left: 30px!important; }

.p40{ padding: 40px!important; }
.p40-t{ padding-top: 40px!important; }
.p40-r{ padding-right: 40px!important; }
.p40-b{ padding-bottom: 40px!important; }
.p40-l{ padding-left: 40px!important; }

.p50{ padding: 50px!important; }
.p50-t{ padding-top: 50px!important; }
.p50-r{ padding-right: 50px!important; }
.p50-b{ padding-bottom: 50px!important; }
.p50-l{ padding-left: 50px!important; }

.p60{ padding: 60px!important; }
.p60-t{ padding-top: 60px!important; }
.p60-r{ padding-right: 60px!important; }
.p60-b{ padding-bottom: 60px!important; }
.p60-l{ padding-left: 60px!important; }

.p70{ padding: 70px!important; }
.p70-t{ padding-top: 70px!important; }
.p70-r{ padding-right: 70px!important; }
.p70-b{ padding-bottom: 70px!important; }
.p70-l{ padding-left: 70px!important; }

.p80{ padding: 80px!important; }
.p80-t{ padding-top: 80px!important; }
.p80-r{ padding-right: 80px!important; }
.p80-b{ padding-bottom: 80px!important; }
.p80-l{ padding-left: 80px!important; }

.p90{ padding: 90px!important; }
.p90-t{ padding-top: 90px!important; }
.p90-r{ padding-right: 90px!important; }
.p90-b{ padding-bottom: 90px!important; }
.p90-l{ padding-left: 90px!important; }

.p100{ padding: 100px!important; }
.p100-t{ padding-top: 100px!important; }
.p100-r{ padding-right: 100px!important; }
.p100-b{ padding-bottom: 100px!important; }
.p100-l{ padding-left: 100px!important; }

.p250-b{ padding-bottom: 250px!important; }
/*------------------------------------------------------------
font-size・・・フォントサイズの設定
-------------------------------------------------------------*/


h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 0.8em;
	font-weight: 700;
	text-align: left;
    letter-spacing: 0.01em; /* 文字間隔を広げる */ }
	

h2 { line-height: 1.3; font-weight: 700; }
h2 { font-size: clamp(1.5rem, calc(1.0417 * 1vw + 1.2917rem), 2.25rem); } /* 24px - 36px */

h3 { line-height: 1.35; font-weight: 700; }
h3 { font-size: clamp(1.375rem, calc(0.4167 * 1vw + 1.2917rem), 1.75rem); } /* 22px - 28px */

h4 { font-size: 1.375rem; line-height: 1.5; font-weight: 700; margin-bottom: 0.8em; }
h4 { font-size: clamp(1.25rem, calc(0.5682 * 1vw + 1.1364rem), 1.5rem); } /* 20px - 24px */

h5 { font-size: 1.375rem; line-height: 1.5; font-weight: 700; margin-bottom: 0.7em; }
h5 { font-size: clamp(1.125rem, calc(0.2083 * 1vw + 1.0833rem), 1.25rem);} /* 18px - 20px */

h6 { font-size: 1.375rem; line-height: 1.5; font-weight: 700; margin-bottom: 0.7em; }
h6 { font-size: clamp(1rem, calc(0.2083 * 1vw + 0.9583rem), 1.125rem);} /* 16px - 18px */


p, table, dl, ul {
  font-size: clamp(1rem, calc(-0.0001 * 1vw + 1rem), 1rem); /* 16px - 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; }
.f16em{ font-size: 1.6em; }
.f17em{ font-size: 1.7em; }
.f18em{ font-size: 1.8em; }
.f19em{ font-size: 1.9em; }
.f20em{ font-size: 2.0em; }
.f21em{ font-size: 2.1em; }
.f22em{ font-size: 2.2em; }
.f23em{ font-size: 2.3em; }
.f24em{ font-size: 2.4em; }
/*------------------------------------------------------------
line-height・・・行間の設定
-------------------------------------------------------------*/
.lh12em{ line-height: 1.2em !important;}
.lh13em{ line-height: 1.3em !important;}
.lh14em{ line-height: 1.4em !important;}
.lh16em{ line-height: 1.6em !important;}
/*------------------------------------------------------------
色
-------------------------------------------------------------*/
.lgreen{ color:#18933b;}
.green{color:#006837;}
.blue{ color:#1c96d4;}
.dblue{ color:#032D6D;}
.ddblue{color: #162067;}
.pink{ color:#dd007f;}
.red{color:#d60a00 !important;}
.white{color:#fff;}
.black{ color:#000!important;}
.gray{ color:#999!important;}
.dgray{ color:#666!important;}
.brown{ color:#a36001!important;}

.fnt_lgreen{ 
    color:rgba(24,147,59,1.00); 
    font-weight:bold;
}
.fnt_blue{
    color:#1c96d4;
    font-weight:bold;
}
.fnt_pink{ 
    color:#dd007f;
    font-weight:bold;
}

/*--- 背景色 ---*/
/*background-color*/
.icon_code{
	padding:3px 8px;
	background-color:#C90306;
	color:#fff;
	font-weight:bold;
	line-height:1.3em;
	display: inline-block;
	text-align:center;
}
.bgc_white{ background-color: #fff;}
.bgc_red{ background-color: #B31114;}
.bgc_lred{ background-color: #dd007f;}
.bgc_pink{ background-color: #ea6099;}
.bgc_orenge{ background-color:#ED7B61;}
.bgc_lorenge{ background-color: rgba(244,159,1,1)!important;}
.bgc_lorenge_s{ background-color: rgba(244,159,1,0.5);}
.bgc_green{ background-color: var(--primary-color)!important;}
.bgc_green_s{ background-color: rgba(146, 168, 36, 0.2);}
.bgc_llblue{ background-color: #00a9e4!important;}
.bgc_dlblue{ background-color: rgba(146,180,193,1.00);}
.bgc_dllblue{ background-color: rgba(146, 181, 223, 1);}
.bgc_dblue{ background-color: rgba(2,103,143,1.00);}
.bgc_lblue{ background-color: rgba(0,130,181,0.1);}
.bgc_blue{ background-color: #162067;}
.bgc_lgray{ background-color: #E6E6E6; z-index: 1;}
.bgc_blueg{ 
    background-color: #d3edfb;  /* fallback for old browsers */
/*background: -webkit-linear-gradient(to top, rgba(14,210,247,1.00), rgba(178,254,250,1.00));  /* Chrome 10-25, Safari 5.1-6 */
/*background: linear-gradient(rgba(211,237,251,1),rgba(211,237,251,1),rgba(211,237,251,1),rgba(1, 140, 216, 0.7)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bgc_blueg02{ 
    background-color: #d3edfb;  /* fallback for old browsers */
/*background: -webkit-linear-gradient(to top, rgba(14,210,247,1.00), rgba(178,254,250,1.00));  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(rgba(74,82,139,1),rgba(22, 32, 103, 0.1)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bgc_black{ background-color: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0.8),rgba(0,0,0,0.6),rgba(0,0,0,0));}
.bgc_blue{
    background-color: var(--sab-blule-color);
    background-image: url(../img/bk_img_02.png); 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}
.bgc_gblue{
    background: rgba(22, 32, 103, 1)/*=#162067*/;
    background: linear-gradient(to bottom right,rgba(22, 32, 103, 1),rgba(15,57,133,1),);
}
/*background-color*/

/*background*/
.bg_white{ background: #ffffff;}
.bg_red{ background: #B31114;}
.bg_lred{ background: #dd007f;}
.bg_pink{ background: #ea6099;}
.bg_orenge{ background: #ED7B61;}
.bg_lorenge{background: rgba(244,159,1,1)!important;}
.bg_lorenge_s{background: rgba(244,159,1,0.5);}
.bg_green{ background: rgba(146, 168, 36, 1)!important;}
.bg_green_s{ background: rgba(146, 168, 36, 0.2);}
.bg_llblue{ background: #00a9e4!important;}
.bg_dlblue{ background: rgba(146,180,193,1.00);}
.bg_dllblue{ background: rgba(146, 181, 223, 1);}
.bg_dblue{ background: var(--sab-blule-color);}
.bg_lblue{ background: rgba(0,130,181,0.1);}
.bg_blue{ background: var(--primary-color);}
.bg_lgray{ background: #E6E6E6; z-index: 1;}
.bg_blueg{background: #d3edfb;  /* fallback for old browsers */
/*background: -webkit-linear-gradient(to top, rgba(14,210,247,1.00), rgba(178,254,250,1.00));  /* Chrome 10-25, Safari 5.1-6 */
/*background: linear-gradient(rgba(211,237,251,1),rgba(211,237,251,1),rgba(211,237,251,1),rgba(1, 140, 216, 0.7)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.program_bk_img { 
      background: linear-gradient(rgb(0, 151, 156 ,0.5), rgb(0, 88, 100 ,0.8)),
              url('../img/main_bk.png');
    /* background-blend-mode: lighten;        ブレンドモードを指定 */
    background-attachment: fixed; /* 背景画像をスクロールに対して固定 */
    background-position: center; /* 背景画像を中央に配置 */
    background-repeat: no-repeat;
    position: relative;
    /*z-index: 5;*/
    background-size: cover;
}

.bk_img_white { 
      background: linear-gradient( rgba(255, 255, 255, 0.7)),
              url('../img/main_bk.png');
    /* background-blend-mode: lighten;        ブレンドモードを指定 */
    background-attachment: fixed; /* 背景画像をスクロールに対して固定 */
    background-position: center; /* 背景画像を中央に配置 */
    background-repeat: no-repeat;
    position: relative;
    /*z-index: 5;*/
    background-size: cover;
}
/*background*/
/*--- 背景色 ---*/



/*--- リンク色 ---*/
a:link {
    color: #b84a96;
    text-decoration: none;
}
.link02:link{
    color: #0071bc;
    text-decoration: none;

}
a:visited {
    color: #0041a5;
    text-decoration: none;
}
a:hover {
    color: #099694;
    text-decoration: underline;
}
.link02:hover {
    color: #099694;
    text-decoration: underline;
}
/*--- リンク色 ---*/

/*--- 点滅 ---*/
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
.opacity1 {opacity:1;}
/*--- 点滅 ---*/

/*------------------------------------------------------------
align・・・文字の横位置
-------------------------------------------------------------*/
/*--- 改行 ---*/

/*スマホのみ改行*/
.br-sp{
    display: none;
    @media only screen and (max-width : 768px){display: block;}
}

/*PCのみ改行*/
.br-pc{
    display: block;
    @media only screen and (max-width : 768px){display: none;}
}
/*--- 改行 ---*/

.al-c{ text-align: center!important; }/*中央寄せ*/
.al-r{ text-align: right!important; }/*右寄せ*/
.al-l{ text-align: left !important; }/*左寄せ*/

/* Rules for sizing the icon. */
.material-icons.md-14 { font-size: 14px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* googleアイコン　位置のずれを調整. */
.material-icons {
    display: inline-flex;
    vertical-align: middle;
}

/*--- 注釈 ---*/
.note{ font-size:0.8em; padding-left:1em; text-indent:-1em; line-height: 1.3em;}
/*--- 注釈 ---*/

/*flex*/
.flex-container{
display: -moz-box;
display: -ms-box;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;            /*横並び・左から右（デフォルト）*/
}

.sp-bt { justify-content: space-between;}

.flexbox-vertical-center {
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
	margin-bottom:0 auto 30px auto;
}

.flex-st{
        align-items: flex-start!important;
}

.z-index10{z-index: 100;}

.w100{
  width: 100%!important;
}

/*--- アンカーリンクの調整 ---*/
.anchor{
  display: block;
   margin-top:-100px;
   padding-top:100px;
}
/*--- アンカーリンクの調整 ---*/

/*------------------------------------------------------------
コンテンツ幅
------------------------------------------------------------*/

.contents_s{
    width: 450px;
	margin:0 auto;
	padding:10px 0;
    z-index: 10;    
}
	
.contents{
	width: clamp(320px, 90%, 1024px);
	margin:0 auto;
	padding:clamp(35px, 6vw, 75px) 0;
  position: relative;
    z-index: 30;
   }


  .contents_inner_m {
	padding: clamp(25px, 4vw, 50px) 0;
  }

  .contents_inner_s {
	padding: clamp(20px, 4vw, 30px) 0;
  }

 .contents_bL{
	margin-bottom:clamp(50px, 6vw, 120px);
  }

.contents_bM{
	margin-bottom:clamp(35px, 5vw, 70px);
  }

.contents_bS{
	margin-bottom:clamp(25px, 4vw, 50px);
  }

.contents_bSS{
	margin-bottom:clamp(20px, 4vw, 30x);
  }



/*------------------------------------------------------------
タイトル周りの装飾
------------------------------------------------------------*/
.bottom-border{
padding-bottom: 5px;
line-height: 1.6em;
max-width: 1200px;
}

/*.bottom-border::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
    background: rgba(24,148,59,1);
}*/

.head-border {
    position: relative;
    display: inline-block;
    padding: 0 55px;
}

.head-border:before,
.head-border:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 50px;
    height: 1px;
    background-color: #666;
}

.head-border:before {left: 0;}

.head-border:after {right: 0;}

.title-border-right {
display: flex;
align-items: center;
}
.title-border-right:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.title-border-right:after {
margin-left: 1rem;
}

.style01{
	font-weight:bold;
	border-bottom:2px solid #008C22;
	padding-bottom:0.3em;
}

.style02{
	font-weight:bold;
	color:#008C8C;
	border-bottom:2px solid #008C8C;
	padding:0 0.8em 0.3em 0.8em ;
}

.style02a{
	font-weight:bold;
	color:#008C8C;
	font-size:1.5em;
	text-align:center;
	margin-bottom:0.2em;
}

.style02b{
	font-weight:bold;
	color:#fff;
	font-size:1em;
	text-align:center;
	line-height:2em;
	height:2em;
	background-color:#0079AF;
		border-radius: 20px; 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	padding:0.2em 1em;
}

.style03{
	font-weight:bold;
	color:#1B99C1;
	border-bottom:2px solid #1B99C1;
	padding:0 0.8em 0.3em 0.8em ;
}

.style04{
	font-weight:bold;
	color:#333333;
	border-bottom:2px solid #333333;
	padding:0 0.8em 0.3em 0.8em ;
}

.midashi_bgg_green{
  background: #005864;
background: linear-gradient(90deg,rgba(0, 88, 100, 1) 0%, rgba(0, 88, 100, 1) 50%, rgba(0, 88, 100, 0.69) 72%, rgba(0, 88, 100, 0) 100%);
  color: #ffffff;
  padding: 5px 15px;
}

.midashi_bgg_white{
  background: #ffffff;
background: linear-gradient(90deg,rgba(255,255,255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.7) 72%, rgba(255, 255, 255, 0) 100%);
  color: var(--sab-green-color);
  padding:  5px 15px;
}

 /*リボン　*//
.ribbon {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --s: 1.8em; /* the ribbon size */
  --d: .8em;  /* the depth */
  --c: .8em;  /* the cutout part */
  
  padding: 0 calc(var(--s) + .5em) var(--d);
  line-height: 1.8;
  background:
    conic-gradient(at left  var(--s) bottom var(--d),
     #0000 25%,#0008 0 37.5%,#0004 0) 0   /50% 100% no-repeat,
    conic-gradient(at right var(--s) bottom var(--d),
     #0004 62.5%,#0008 0 75%,#0000 0) 100%/50% 100% no-repeat;
  clip-path: polygon(0 var(--d), var(--s) var(--d),var(--s) 0,calc(100% - var(--s)) 0,calc(100% - var(--s)) var(--d),100% var(--d),calc(100% - var(--c)) calc(50% + var(--d)/2),100% 100%,calc(100% - var(--s) - var(--d)) 100%,calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) 100%,0 100%,var(--c) calc(50% + var(--d)/2));
  background-color: #CC333F; /* the main color */
  width: fit-content;
}

 /*テキスト前にdot*/
ul.dot li{
    padding-left: 1.3em;
    text-indent: -1.3em;
}

ul.dot li::before {
    content: "●";
    margin-right: 0.3em;
    color:var(--sab-color);
    display: inline;
}

 /*囲み文字*/
.code01 {
    background-color:var(--sab-color);
    display: inline-block;
    padding: 5px 7px;
    margin-bottom: 2px;
    line-height: 1;
    border: transparent 1px solid;
	text-align:center;
		border-radius:5px;
		font-size:0.9em;
}
.code02{
    background-color:rgba(22, 32, 103, 1);
    display: inline-block;
    padding: 5px 7px;
    margin-bottom: 10px;
    line-height: 1;
    border-radius:3px;
	text-align:center;
		font-size:0.8em;
		font-weight:bold;
		color:#ffffff; 
}
.code03 {
    background-color:rgba(1,140,216,1.00);
    /*display: inline-block;*/
    padding: 5px 7px;
    line-height: 1;
    /*border: transparent 1px solid;
	width:10em;*/
    border-radius:3px;
	text-align:center;
		font-size:0.8em;
		font-weight:bold;
		color:#ffffff;
}

/*------------------------------------------------------------
ヘッダー
------------------------------------------------------------*/


/*------------------------------------------------------------
全体背景
------------------------------------------------------------*/

/* 左右素材の固定 */
.overlay-left {
  left: 0;
  background-image: url(../img/bk_parts_l.png);
  background-size: cover;
  background-position: center;
}

.overlay-right {
  right: 0;
  background-image: url(../img/bk_parts_r.png);
  background-size: cover;
  background-position: center;
}

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

.fixed-overlay {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 22%;
    z-index: 10;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/*------------------------------------------------------------
メインビジュアル
------------------------------------------------------------*/
/* メインビジュアル背景 */
.main_bg {
  position: relative;
  background-color: #00979c;
  overflow: hidden;
}

/* 背景画像 */
#top_main .bg_inner {
  position: relative;
  width: 100%;
  min-height: calc(50px + 460px + 50px);
  background: url(../img/main_bk.png) no-repeat center bottom;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}

/* 内側 */
#top_main .top_inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 50px 0;
}

/* h1画像と長方形の共通基準 */
#top_main .mv_visual {
  position: relative;
  width: min(90%, 720px);
  aspect-ratio: 720 / 460;
  margin-top: 0;

}

/* 乗算の長方形背景 */
#top_main .multiply_shadow_box {
  position: absolute;
  inset: 0;
  width: 93.7%;
  height: 75%;
  margin: 24px auto 0;
  background-color: var(--primary-color);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 3;
}

/* h1 */
#top_main .mvtitle_box {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 4;
}

/* picture */
#top_main .mvtitle_box picture {
  display: block;
  width: 100%;
  padding: 0;
}

/* タイトル画像 */
#top_main .mvtitle_box picture img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
}

/* ボタン背景 */
.top_btn_box {
  position: relative;
  background-color: var(--primary-color);
  margin:0 auto;
    .btn_order{
      position: relative;
      z-index: 30;
    }
    .btn_order a{
        margin-top: 0;
    }
}

/* 980px以下はヘッダー固定分を逃がす */
@media screen and (max-width: 980px) {
  #top_main {
    padding-top: 56px;
  }
}

@media screen and (max-width: 767px) {
  .fixed-overlay {
    width: 28%;
  }

  #top_main .bg_inner {
    min-height: auto;
    background-size:  1250px;
    background-position: right -420px top, center;
    height: auto;
  }

  #top_main .top_inner {
    position: relative;
    inset: auto;
    min-height: calc(20px + 240px + 20px);
    padding: 50px 0;
  }

  #top_main .mv_visual {
    width: min(88%, 420px);
    aspect-ratio: 420 / 240;
    margin-top: 0;
  }

  #top_main .multiply_shadow_box {
    width: 93.7%;
    height: 84%;
    margin: 0 auto 0;
  }

  #top_main .mvtitle_box picture img {
    width: 100%;
    max-width: 420px;
  }

  .btn_bg {
    margin-top: 0;
  }
}

@media screen and (max-width: 480px) {
  #top_main .top_inner {
    min-height: calc(20px + 220px + 20px);
    padding: 40px 0;
  }

  #top_main .mv_visual {
    position: relative;
    width: min(90%, 360px);
    aspect-ratio: 360 / 220;
    z-index: 30;
  }

  #top_main .multiply_shadow_box {
    width: 93.7%;
    height: 78%;
    margin: 7px auto 0;
    background: none;
  }
}

/*--- bodyのトップ ---*/
#top{display:block !important;}
/*--- bodyのトップ ---*/

/*------------------------------------------------------------
開催にあたって
------------------------------------------------------------*/
#outline{


    .bg_white{
        padding: 1.5vw;
    }
    .text_comp{
      line-height: 1.6em;
      margin-bottom: 0.2em;
      text-align: right;
    }
    .text_name{
      line-height: 1.3em;
      text-align: right;
    }
}

/*------------------------------------------------------------
特徴
------------------------------------------------------------*/
.flex-box{
    display: flex;
    gap: 2%;
    justify-content: space-between;
}

#tokucyo{
  .title-border-right:after {
        border-top: 1px solid #ffffff;  
    }
  
  .flex-box_toku{
    flex:1;
    background: #ffffff;
    border-radius: 15px;
  }

  .flex-box_toku_inner{
    padding: 15px;
    text-align: center;


    .nomber {
        margin-bottom: 0.8em;

        span{
        font-size: clamp(1.25rem, calc(0.9091 * 1vw + 1.0682rem), 1.75rem);/* 20-28*/
        font-weight: bold;
        color: rgb(0, 151, 156 ,0.5);
        border-bottom: 2px solid rgb(0, 151, 156 ,0.5);
        }

    }
    h6{
        color: var(--sab-green-color);
        font-weight: bold;
        text-align: center;
       font-size: clamp(1rem, calc(0.142 * 1vw + 0.9716rem), 1.0625rem);
    }
    p{
      font-size: 14px;
      text-align: left;
    }
  }

  .consept_box{
    color: #ffffff;
    margin-top: 30px;

  }



  @media only screen and (max-width : 980px){
    .flex-box{
      flex-wrap: wrap;
      gap: 10px;
    }
    .flex-box_toku{
        flex: auto;
        width: calc(95% / 2);
      }

  }

    @media only screen and (max-width : 640px){
    .flex-box{
      flex-wrap: wrap;
      gap: 10px;
    }
    .flex-box_toku{
        flex: auto;
        width: 100%;
      }

  }
     @media only screen and (min-width : 980px){
    .flex-box{
      flex-wrap: nowrap;
      gap: 10px;
    }
    .flex-box_toku{
        flex: 1;
      }
  }

}




/*------------------------------------------------------------
概要
------------------------------------------------------------*/
.gaiyou_img{
position: absolute;
right: -30px;
bottom: 35px;
width: 300px;
}
.gaiyou_img img{border: 1px solid rgba(199,198,198,1.00);}

.gaiyou_img figcaption{
font-size: 0.8em;
text-align: center;
}
#gaiyou{
  h2{
    color: #ffffff;
  }
}

#gaiyou dl dd ul.dot li::before {
    content: "●";
    margin-right: 0.3em;
    color: var(--sab-color);
    display: inline;
}

#gaiyou dl{ 
    line-height: 1.5em;
    color: #ffffff;
 }
#gaiyou dl dt{ 
width:20%;; 
text-align:center; 
padding:0.5em 0;
border-bottom: 1px solid rgba(255,255,255,1.0);
}
#gaiyou dl dd{
	margin-left:0.5em;
    border-bottom: 1px solid rgba(255,255,255,1.0);
    width: 75%;
    padding: 0.5em 10px;
}
#gaiyou dl dt:first-child,
#gaiyou dl dd.top_lineg{border-top: 1px solid rgba(255,255,255,1.0);}

@media only screen and (max-width : 768px){
    #gaiyou dl dt{ 
        width: 100%;
        margin-bottom: 0;
        float:none;
    }
#gaiyou dl dd{
    margin-left:0;
    padding:10px 0;
    height:auto;
    font-weight: normal;
    width: 100%;
}           
#gaiyou  dl {margin-bottom: 0;}
#gaiyou dl dd ul.dot li{margin-left: 0px;}
}

.tb_schedule{
  th{
    padding-right: 0.3em;
  }
  td:nth-child(2) {
	text-align: right;
  padding-right: 0.3em;
  font-variant-numeric: tabular-nums; /* 数字の幅を均等にする魔法のプロパティ */
  }
}

.num {
  display: inline-block;
  width: 1.5em; /* 2桁分の幅を確保 */
  text-align: right;
}
/*------------------------------------------------------------
プログラム
------------------------------------------------------------*/
/*#program { height: 100vhw;}*/



#program {
    h2{
        color: #ffffff;
    }
    .program_box{
        margin-bottom: 25px;

        .program_box_inner{
            padding: 20px ;
            display: flex;
            justify-content: space-between;
            background-color: #ffffff;
            gap: 5%;

            .p_box_inner_title{
                background: var(--primary-color);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2%;
                width: 150px;

                .text_nam{
                    font-size: clamp(1.25rem, calc(0.9091 * 1vw + 1.0682rem), 1.75rem);
                    color: #ffffff;
                    font-weight: bold;
                }
                .text_thema{
                    font-size: 1em;
                    background: var(--sab-color);
                    font-weight: bold;
                    border-radius: 8px;
                    width: 5em;
                    text-align: center;
                }

                .text_day{
                    color: #ffffff;
                }
            }

            .p_box_inner_main{
                width: 100%;
                h4{
                  color: var(--primary-color);
                  line-height: 1.3em;
                }
                h5{
                  color: var(--sab-green-color);
                  line-height: 1.3em;
                }

                hr{
                    margin: 20px 0 ;
                    border-bottom: 1px solid var(--primary-color);
                }

                .jirei_photo{
                    float: left;
                    width: 110px;
                    margin-right: 1em;
                }

            }


        }
    }

     .program_box01{
      margin-bottom: 20px;

       .title_box{
         background: url('../img/program_bk.webp') no-repeat top right;
         position: relative;
         padding: 15px;
         height: 60px;

         .text_nam{
                position: absolute;
                    font-size: clamp(1.125rem, calc(0.5682 * 1vw + 1.0114rem), 1.375rem);
                    color: #ffffff;
                    font-weight: bold;
                    background: var(--primary-color);
                    width: 100px;
                    height: 60px;
                    line-height: 60px;
                    text-align: center;
                    top:0px;
                    left: 0px;
                }
            h3{
              font-size:clamp(1rem, calc(0.5682 * 1vw + 0.8864rem), 1.25rem);
              margin-left: 100px;
              display: flex;
              margin-bottom: 0;

              .text_thema{
                    font-size: 1em;
                    background: var(--sab-color);
                    border-radius: 8px;
                    width: 5em;
                    text-align: center;
                }
              .text_day{
                    color: #ffffff;
                    margin-left: 0.8em;
                }

            }

            @media (max-width: 768px) {
                height: 50px;

                 .text_nam{
                   height: 50px;
                   line-height: 50px;

                 }
 

              }

       }


        .program_box_inner{
            padding: clamp(15px, 4vw, 60px); 
            display: flex;
            justify-content: space-between;
            background-color: #ffffff;
            gap: 5%;

            .p_box_inner_main{
                width: 100%;
                h4{
                  color: var(--primary-color);
                  line-height: 1.3em;
                }
                h5{
                  color: var(--sab-green-color);
                  line-height: 1.3em;
                }

                hr{
                    margin: 20px 0 ;
                    border-bottom: 1px solid var(--primary-color);
                }
                 .jirei_photo{
                    float: left;
                    width: 110px;
                    margin-right: 1em;
                 }
                 

            }


        }
    }

   .jirei_box{
                  display: flex;

                  .jirei_box_text{
                    display: flex;
                    flex-direction: column;
                    width: calc( 100% - 160px);
                    @media only screen and (max-width : 768px){
                      width: calc( 100% - 70px);

                    }

                    .name_box{
                      margin-top: auto;
                      text-align: right;
                    }
                  }


                  .jirei_photo01{
                    width: 160px;
                    margin-left: 1em;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;

                    @media only screen and (max-width : 768px){
                      width: 70px;

                    }
                 }
   }
/* 概要が入る場合 */

.jirei_gide {
  display: grid;
  grid-template-columns: 1fr 160px; /* テキスト列 + 写真列 */
  grid-template-areas:
    "text  photo"
    "name  photo";
  column-gap: 30px;
  row-gap: 16px;
}

.jirei_gide__text  { grid-area: text; }
.jirei_gide__name  { grid-area: name; }
.jirei_gide__photo { grid-area: photo; }

@media (max-width: 768px) {
  .jirei_gide {
    grid-template-columns: 1fr 70px;  /* 名前が残り全部、写真は固定70px */
    grid-template-areas:
      "text  text"
      "name  photo";                    /* 名前→写真の順(写真が右端) */
   row-gap: 20px;
    column-gap: 15px;
    align-items: center;
  }
  .jirei_gide__photo{
    max-width: none;
}
.jirei__gide__name {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: end;
  height: 100%;
}
}
 

  


    .text_com{
      font-size: 1.02em;
      font-weight: bold;
      text-align: right;
    }
    .text_name{
      line-height: 1.3em;
      text-align: right;
    }
    .code01{
          padding: 2px 7px;
          font-size: 14px;
    }
    .text_copy{
      font-size: 0.85em;
    }

  table.schedule_tb{
    border: none;
    width: 100%;
    background: #ffffff;

      tr {
        border-bottom: 1px solid var(--sab-green-color);
      }

      th{
        padding: 5px;
        background-color: rgba(122, 152, 153, 0.3);
        text-align: center;
        width: 20%;
      }
      td{
        padding: 5px 5px 5px 1em;
        background-color: rgba(0, 151, 156, 0.1);


      }

  }

}

ul.program_flow_list{
  display:flex;
  align-items:center;
  justify-content:center;
  list-style:none;
  padding:0;
}
ul.program_flow_list li{
  flex:1 1 0;
  min-width:0;
}
ul.program_flow_list li a{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  padding:10px 4px;
  text-align:center;
  font-weight:bold;
  color:#1a1a1a; /* 墨文字 */
  font-size:0.95em;
  white-space:nowrap;
  background-color: var(--sab-color);
  text-decoration: none;
}

ul.program_flow_list li a:hover{
  background: var(--primary-color);
  cursor: pointer;
  
}
ul.program_flow_list .flow_arrow{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.2em;
  font-weight:bold;
  width:20px;
}
@media (max-width:768px){
  .program_flow_list{ 
    flex-direction: column;
  }
  .program_flow_list .flow_arrow{
    width:100%;
    transform:rotate(90deg);
    margin:1px 0;
    text-align: center;
  }
   ul.program_flow_list li{
    width: 100%;
    flex: none; /* 縦積みではflex:1 1 0は不要なので解除 */
   }
  ul.program_flow_list li a{
    margin-bottom:4px;
    white-space:normal;
    width: 100%;
  }
}
/*-------------------特典-------------------*/
    .tokuten_box{
      display: flex;
      margin-top:clamp(20px, 5vw, 30px);
      /*background: var(--sab-color);*/
      justify-content: center;
      

      .toku_box{
        background: #f90000;
        color: #ffffff;
        padding: 5px 10px;
        white-space: nowrap;
        display: flex;
        align-items: center;
      }

      .text_box{
        padding: 5px 10px;
        font-weight: bold;
        background-color: #ffffff;
        border: 2px solid #f90000;
        color: #f90000;
        h5{
          margin-bottom: 0;
          
        }
      }
    }
/*------------------------------------------------------------
探求
------------------------------------------------------------*/
.tankyu_box{
        display: flex;
    gap: 2%;
    justify-content: space-between;
    margin-bottom:clamp(20px, 5vw, 30px);
    }
.tankyu_box_inner{
        flex: 1;
        background: #ffffff;
        display: flex;
        flex-direction: column;
    
    .toku_midashi_box{
        display: flex;
        justify-content: flex-start;
        background-color: var(--sab-green-color);
        padding: 10px;
        align-items: center;
        height: 65px;

        .tashi_box_oku_midnom{
          border-right: 1px solid #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          padding-right: 10px;
          height: 45px;
          p {
            font-size: clamp(1.125rem, calc(0.4167 * 1vw + 1.0417rem), 1.375rem)};/*18px -22px*/
            color: #ffffff;
            font-weight: bold;

            span { font-size: 0.5em;}
          }
        }
         .toku_midashi_box_text{
            display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 10px;
          P{
            font-size: 16px;
            color: #ffffff;
            font-weight: bold;
            line-height: 1.3em;
            }
         }

      .toku_t_box{
        padding: 10px;
        display: flex;
        flex-direction: column;

        h5{
            margin-bottom: 0.5em;
            color: var(--sab-green-color);
        }
        p{
            font-size: 14px;
            line-height: 1.6em;
            margin-bottom: 15px;
        }


      }
       .bg_oreng{
          background: var(--sab-color);
          color: #000000!important;

          .tashi_box_oku_midnom{
            border-color: #000;
          }
          p{
            color: #000000!important;
          }
        }

                .box_text{
            border-radius: 5px;
            border: 1px solid var(--sab-green-color);
            display: block;
            text-align: center;
            margin-top: auto;
            font-size: 16px;
            font-weight: bold;
            color: var(--sab-green-color);
            line-height: 1.3em;
            padding: 10px;
            margin: auto  10px 10px 10px;
        }

        .text_zyushin{
          background: #ca0915;
          font-weight: normal;
          color: #ffffff;
          font-size: 18px;
          border-radius: 5px;
          margin: 5px auto 0 auto ;
          text-align: center;
          padding: 5px 1em;
          width: 4em;
        }

     
    }
    
    .read_box{
      display: flex;
      gap: 1%;
      margin-bottom:clamp(20px, 5vw, 30px);

      .mokuteki_box{
        background: var(--sab-color);
        color: #ffffff;
        padding: 10px;
        white-space: nowrap;
        display: flex;
        align-items: center;
      }

      .text_box{
        width: 100%;
        color: #ffffff;
      }
    }
    
@media only screen and (max-width : 768px){
  .tankyu_box_inner{
  .toku_midashi_box{
    height: 40px;
  }
  .toku_midashi_box {
  .tashi_box_oku_midnom{
    height: 30px;
  }
}
}
  .tankyu_box{
    flex-wrap: wrap;
    gap: 15px;
  }

  .tankyu_box_inner{
        flex: auto;
        width: 100%;
  }

}











/*------------------------------------------------------------
企画委員
------------------------------------------------------------*/

#committee{
  h2{
    color: var(--sab-green-color);
    text-shadow: 2px 2px 5px #ffffff, -2px -2px 5px #ffffff, 2px -2px 5px #ffffff, -2px 2px 5px #ffffff;
  }
   
}
.committee_box1,
.committee_box2{
padding-bottom: 15px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(199,199,199,0.9);
width: 100%;
overflow: hidden;
box-sizing: border-box;
}

.committee_box1 img,
.committee_box2 img {
outline: 3px solid #ffffff;
  outline-offset: -3px; /* 線を内側へ */
}

.committee_box1 p,
.committee_box2 p{
font-size: 0.9em;
line-height: 1.5em;
}

.committee_box1 figure{
    float: left;
    width: 120px;
    padding: 0px 15px 0px 0px;
}

.committee_box2 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.committee_box2_inner{width: calc(94% / 2);}

.committee_box2_inner:first-child{margin-bottom: 15px;}

@media only screen and (max-width : 768px){
.committee_box2 {display: block;}
.committee_box2_inner{
overflow: hidden;
width: auto;
margin-bottom: 10px;
}
}

.committee_box2 figure{
    float: left;
    width: 100px;
    padding: 0px 15px 0px 0px;
}

table.TableCommittee {
	border: none;
    width: 100%;
    background-color: #ffffff;
}

.TableCommittee td,
.TableCommittee th{ 
    padding: 5px; 
    /*background-color:rgba(8, 38, 56,0.7); */
    font-size: 0.9em;
}

 /*行の色を変える時
.TableCommittee tr:nth-child(even) td {	background: rgb(0, 86, 141);}
.TableCommittee tr:nth-child(even) th {	background: rgb(0, 86, 141);}*/

.TableCommittee th {
	padding: 5px 25px 5px;
	font-weight: bold;
	white-space: nowrap;
	vertical-align: top;
  width: 6em;
}

.TableCommittee tr td:first-child {
    width: 7em;
    white-space: nowrap;
	vertical-align: top;
  padding-left: 15px;
}

@media only screen and (max-width : 768px){
.TableCommittee td {
display: block;
line-height: 1.3em;
font-size: 0.95em;
padding-left: 15px;
padding-right: 15px;
}

.TableCommittee tr td:first-child {
    padding-bottom: 0;
}

.TableCommittee td .Name {padding: 5px 10px;}
}

/*------------------------------------------------------------
お問い合わせContact
------------------------------------------------------------*/
#contact{
	width:100%;
	position:relative;
	overflow:hidden;
    background: var(--sab-green-color);
	color:#fff;
}


#contact h2 span {color: #D583EA;}

#contact h2 span::before {background-color: #D583EA;}

#contact .innar{
    margin:0 auto;
	@media only screen and (max-width : 768px){width:100%;}
}

#contact dl{
	width: clamp(300px, 90%, 600px);
	margin:0 auto;
}
	
	
#contact dl dt{
	width:100%;
	font-weight:bold;
	text-align:center;
	background:#fff;
	border-radius: 4px;
	float:left;
	margin-bottom:20px;
	color:#666;
  padding: 5px 0;
}

#contact dl dd{
	margin:0;
	padding:10px 15px 0 15px;
}

#contact dl dd p{ line-height:1.3em; font-size:0.9em;}

	





/* btn Style
-------------------------------------------------------- */
.btn_order{
	margin:0 auto;
    align-items: center;
}
.btn_order a{
	width:260px;
	padding: 7px 0;
    margin: 50px auto 0;
    display: inline-block;
    background-color: var(--sab-color);
    border-radius: 10px;
    text-align: center;
    color: #fff !important;
    font-weight: bold;
    font-size: clamp(14.00px, calc(0.31vw + 12.84px), 16.00px);
    transition: .2s;
	border:2px solid #fff;
	font-family: body-apple-system,BlinkMacSystemFont,"Hiragino kaku Gothic ProN",MyYuGothicM,Meiryo,sans-serif;
    @media only screen and (max-width : 768px){
        margin: 30px auto 0;
        width:230px;
    }
}

.btn_style_m10{margin: 10px;}

.btn_order a.style_call{ background:none;}

@media only screen and (max-width : 768px){
	.btn_order a{
	display: block;
   /* width: auto;*/
	}
}

.btn_order a:hover,
.btn_order02 a:hover{
	background-color:var(--primary-color);
	text-decoration:none;
}

.nolink a,
.nolink{
background: rgba(184,182,182,1.00) !important;
    pointer-events: none;
	opacity: 0.8;
}

.btn_box{ 
display:flex;
justify-content:space-between;
width:719px;
margin:20px 10px 30px 10px;
}

.btn-red a {
  display: block;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  line-height:2.5em;
  text-align:center;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e51013+0,a80002+100 */
background: #e51013; /* Old browsers */
background: -moz-linear-gradient(top, #e51013 0%, #a80002 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e51013 0%,#a80002 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e51013 0%,#a80002 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e51013', endColorstr='#a80002',GradientType=0 ); /* IE6-9 */
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  border-bottom: solid 3px #680d14;
  width:300px;
  margin: 0 auto 5px auto;
  font-size:0.85em;
}

.btn-blue a {
  display: block;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  line-height:3em;
  text-align:center;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0071bc+0,000d47+100 */
background: #0071bc; /* Old browsers */
background: -moz-linear-gradient(top, #0071bc 0%, #000d47 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #0071bc 0%,#000d47 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #0071bc 0%,#000d47 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0071bc', endColorstr='#000d47',GradientType=0 ); /* IE6-9 */
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  border-bottom: solid 3px #090E45;
  width:100%;
  float: none;
  margin-bottom:10px;
  font-size:0.85em;
}

.btn-green a {
  display: block;
  width:300px;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  line-height:3em;
  text-align:center;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#197f31+0,274943+100 */
background: #197f31; /* Old browsers */
background: -moz-linear-gradient(top, #197f31 0%, #274943 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #197f31 0%,#274943 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #197f31 0%,#274943 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#197f31', endColorstr='#274943',GradientType=0 ); /* IE6-9 */
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  border-bottom: solid 3px #090E45;
  margin:15px auto 0 auto;
  font-size:0.85em;
}

.btn-red a:hover,
.btn-blue a:hover,
.btn-green a:hover {
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.6);
  opacity:0.6;
}

/* PageTop Style
-------------------------------------------------------- */
#page-top a {
 position: fixed;
    right: 10px;
    bottom: 10px;
    font-size: 2em;
    background: rgba(107,106,106,1.00);
    color: #ffffff;
    padding: 10px;
    border-radius: 5px;
	z-index:500;
    width: 60px;
    height: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
#page-top a:hover{
text-decoration: none;
background: var(--primary-color);
}

/*------------------------------------------------------------
申し込み
------------------------------------------------------------*/
#participation_terms{
  h2{
    color: var(--sab-green-color);
  }
        .bg-gradient{
        background: linear-gradient(180deg,rgba(0, 86, 141, 1) 0%, rgba(16, 108, 173, 1) 64%, rgba(8, 38, 56, 1) 100%);
    }
    
    color: var(--sab-blule-color);

    .btn_box2btn{
        display: flex;
        justify-content: space-around;
        max-width: 800px;
        margin: 0 auto 50px auto;
}

.title-border-right {
display: flex;
align-items: center;
}
.title-border-right:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.title-border-right:after {
margin-left: 1rem;
}

 .btn_order a{
  margin-top: 0;
 }

.inner{
    width: clamp(320px, 90%, 900px);
   }

    @media only screen and (max-width : 768px){
        .btn_box2btn{
       flex-direction: column;
        width: auto;
       margin: 0 auto 30px auto;
          }
        }

    dl.terms-item {
   display: flex;
    flex-wrap: wrap;
    
}

dl.terms-item dt {
    width:1.5em;
}

dl.terms-item dd {
    width: calc(100% - 1.5em);
    margin-inline-start: 0;
    }

}


/* -------------- 利用規約 -------------- */
table.kiyaku_tb{
  margin: 20px auto ;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
}

table.kiyaku_tb tr td{
	border: none;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	width: 50%;
	text-align: center;
	vertical-align: middle;
	padding: 5px 40px;
}

table.kiyaku_tb tr td:last-child{
  border-right: 1px solid #999;
}


@media screen and (max-width: 768px){
    table.kiyaku_tb{
	margin: 15px auto;
    width: 70%;
    }
	table.kiyaku_tb tr td{
		padding: 5px 8px;
	}
}

/* -------------- 料金 -------------- */
table.fee{
   width: 80%;
  td,th{
    padding: 5px;
    text-align: center;
    color: #000;
  }
  th{
    background-color: rgb(190, 196, 196);
  }
  td{
    background: rgb(223, 250, 251);
     font-weight: bold;
  }
  tr td:first-child,
  tr th:first-child{
    border-right: 1px solid #ffffff;
  }
}





/* Footer Area Style
-------------------------------------------------------- */

#footer{
	width:100%;
	background-color:#000;
}

#copyright{
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	clear: both;
	width: 700px;
	padding:10px 0;
	margin:0 auto;
}

@media only screen and (max-width : 768px){ #copyright{ width:100%;}}