@charset "UTF-8";

.mt15{margin-top: 15px!important;}
.mt20{margin-top: 20px!important;}
.mt30{margin-top: 30px!important;}

/*=============================================== 
	pc/sp
===============================================*/
/*-- PC版表示CSS  --*/
.pc {
  display:block;
}
.sp {
  display:none;
}
.clearbox{
	clear: both;
}

/*-- スマホ版表示CSS  --*/
@media screen and (max-width: 640px) {
  .pc{
    display:none;
  }
  .sp{
    display:block;
  }
}


/*=============================================== 
	ドロワーメニュー
===============================================*/
/*fixedを消すcss↓*/
.not-fixed {
	display:none !important;
}
/*fixedを消すcss↑*/

.wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 13px;
	background: #fff;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 2;
}

.side-open .wrapper,
.side-open .overlay {
	-webkit-transform: translate3d(-300px, 0, 0);
	transform: translate3d(-300px, 0, 0);
}

.overlay {
	content: '';
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 3;
}

.side-open .overlay {
	visibility: visible;
	cursor: pointer;
	background: rgba(0,0,0,.7);
}

.overlay::after {
	visibility: hidden;
	position: fixed;
	top: 40%;
	left: 0;
	display: block;
	width: 100%;
	height: 50px;
	color: rgba(255,255,255,0);
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}

.side-open .overlay::after {
	visibility: visible;
	color: rgba(255,255,255,.8);
}

.contents {
	height:800px;
}

/* --------------------------------------------------- btn */
.btn__box {
	position: relative;
	text-align: center;
	z-index: 1;
}

.btn__box a {
	display: block;
	width: 198px;
	height: 38px;
	margin: 0 auto;
	line-height: 40px;
	font-size: 13px;
	color: #1a1e24;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	border: 1px solid #1a1e24;
}

.btn__box a:hover {
	color: #fff !important;
	background: #1a1e24;
}

.btn__box--svg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 214px;
	height: 54px;
	margin: auto;
	z-index: -1;
}

.btn__box--svg rect {
	fill: transparent;
	stroke: #1a1e24;
	stroke-width: 1px;
	stroke-dasharray: 242px;
	stroke-dashoffset: 256px;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.btn__box a:hover + .btn__box--svg rect {
	stroke-width: 2px;
	stroke-dasharray: 600px;
	stroke-dashoffset: 0;
}

/* --------------------------------------------------- side menu */
.side-menu {
	position: fixed;
	top: 0;
	right: 0;
	box-sizing: border-box;
	width: 500px;
	height: 100%;
	padding-top: 70px;
	text-align: left;
	font-size: 1.7em;
	background: #00A0E9;
	z-index: 1;
	display: none;
}

.side-open .side-menu {
	display: block;
}

.side-menu__ul {
	width: 100%;
	height: 100%;
	display: block;
	overflow: auto;
}
.side-menu__ul li{
/*	border-bottom: solid 1px #ffffff;*/
	cursor: pointer!important;
}
.side-menu__ul li a{
  position: relative;
	color: #fff;
	display: block;
	border-bottom: 1px solid #fff;
	padding-left: 30px!important;
	padding-top: 10px!important;
	padding-bottom: 10px!important;
	
}

.side-menu__ul li a::after{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -4px;
}
/* --------------------------------------------------- ellipsis btn */
.side-menu-btn {
	position: fixed;
	top: 15px;
	right: 15px;
	width: 50px;
	height: 50px;
	padding: 5px;
	cursor: pointer;
	z-index: 4;
}

.ellipsis-v {
	position: relative;
	display: block;
	cursor: pointer;
	width: 50px;
	height: 50px;
	background: #00A0E9;
}

.ellipsis-v .point {
	position: absolute;
	left: 0;
	right: 0;
	display: block;
	width: 25px;
	height: 3px;
	margin: auto;
	background: #fff;
/*	box-shadow: 0 0 8px 0 #161616;*/
	-webkit-transition: all .3s;
	transition: all .3s;
}

.ellipsis-v .point.top {
	top: 15px;
}

.ellipsis-v .point.mid {
	top: 0;
	bottom: 0;
}

.ellipsis-v .point.bot {
	bottom: 15px;
}

.side-menu-btn:hover .top {
	-webkit-transform: translateY(-2px);
	-ms-transform: translateY(-2px);
	transform: translateY(-2px);
}

.side-menu-btn:hover .bot {
	-webkit-transform: translateY(2px);
	-ms-transform: translateY(2px);
	transform: translateY(2px);
}

.side-open .side-menu-btn:hover .top,
.side-open .top {
/*	width: 56px;*/
	height: 3px;
	background: #fff;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 8px;
}

.side-open .mid {
	opacity: 0;
}

.side-open .side-menu-btn:hover .bot,
.side-open .bot {
/*	width: 56px;*/
	height: 3px;
	background: #fff;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left: 8px;
}

.side-open .side-menu-btn:hover .bot,
.side-open .side-menu-btn:hover .top {
	background: #ccc;
}

.side-open .wrapper,
.side-open .overlay {
  -webkit-transform: translate3d(-500px, 0, 0);
  transform: translate3d(-500px, 0, 0);
}
/* --------------------------------------------------- acMenu2 */
.acMenu2 li {
/*    text-align:center;*/
}

.acMenu2 h2 {
    font-size: 1em;
	font-weight: normal;
}

.side-menu__ul dt,
.side-menu__ul li,
.side-menu__ul .sub-menu-ttl,
.side-menu__ul .menu-ttl_pull {
	display: block;
	padding: 0;
	color: #fff;
}

.side-menu__ul dl{
	margin: 0px;
}

.side-menu__ul dd{
	margin-left: 0;
}

.side-menu__ul h2,
.side-menu__ul .menu-ttl_pull {
	cursor: pointer;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.side-menu__ul dt{
	padding-left: 10px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
	border-bottom: 1px solid #fff;
	background: #0071BC;
}
.side-menu__ul h2{
	padding-left: 10px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
	background: #2A408E;
}
.sub-menu dd ul li a{
	background: #fff;
	border-bottom: 1px solid #2A408E;
	color: #2A408E;
	
}
.sub-menu dd ul li a::after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #2A408E;
    border-right: solid 2px #2A408E;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -4px;
}
.side-menu__ul li > .sub-menu dd  {
    border-bottom: solid 1px #ffffff;
	padding-top: 0px!important;
	padding-left: 0px!important;
	padding-bottom: 0px!important;
    cursor: pointer !important;
}
/* --------------------------------------------------- acMenu3 */
.acMenu3 li,.menu-link li {
    text-align: left;
}

.acMenu3 li a {
background: #E5F2FF!important;
}

.side-menu__ul .menu-ttl_pull_1:after,
.side-menu__ul .menu-ttl_pull_2:after,
.side-menu__ul .menu-ttl_pull_3:after,
.side-menu__ul .menu-ttl_pull_4:after,
.side-menu__ul .menu-ttl_pull_5:after,
.side-menu__ul .menu-ttl_pull_6:after,
.side-menu__ul .menu-ttl_pull_7:after,
.side-menu__ul .acMenu2 h2:after,
.side-menu__ul .menu-ttl_pull:after  {
	font-family: "Font Awesome 5 Free";
	content: '\f0fe';
	font-weight: 900;
	padding-left: 5px;
	color: #ffd800;
	font-size: 20px;
}
.side-menu__ul .menu-ttl_pull_1.open:after,
.side-menu__ul .menu-ttl_pull_2.open:after,
.side-menu__ul .menu-ttl_pull_3.open:after,
.side-menu__ul .menu-ttl_pull_4.open:after,
.side-menu__ul .menu-ttl_pull_5.open:after,
.side-menu__ul .menu-ttl_pull_6.open:after,
.side-menu__ul .menu-ttl_pull_7.open:after,
.side-menu__ul .acMenu2 h2.openAcd:after,
.side-menu__ul .menu-ttl_pull.open:after {
	font-family: "Font Awesome 5 Free";
	content: '\f146';
	font-weight: 900;
	padding-left: 5px;
	color: #ffd800;
	font-size: 20px;
}


/*=============================================== 
	SP header
===============================================*/
@media screen and (max-width: 640px) {

#HeaderWrapper {
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  z-index: 3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
#HeaderWrapper::before {
  content: '';
  width: 100%;
  height: 3px;
  display: block;
  background-color: #00A0E9;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#HeaderWrapper #Header {
  min-width: inherit;
}
#HeaderWrapper #Header .Logo {
  text-align: left;
  margin: 10px;
}

.menu-btn {
    position: fixed;
    top: 15px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #00A0E9;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}	
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: #00A0E9;
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 1.5rem;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 26px;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #00A0E9;
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}
.menu-content ul{
 height: 90%;
 overflow: auto;
 -webkit-overflow-scrolling: touch;
}

}

/*=============================================== 
	メニュー部分
===============================================*/
.flex {
    display: flex;
}

.flex li {
    list-style: none;
}

/*
.m01 .active{
    background: url(../images/new_menu/menu1_1_on.jpg) no-repeat;
}
 
*/
/*
.m01 {
    background: url(../images/new_menu/menu1_1_on.jpg) no-repeat;
}
 
.m02 {
    background: url(../images/new_menu/menu2_1_on.jpg) no-repeat;
}
 
.m03 {
    background: url(../images/new_menu/menu3_1_on.jpg) no-repeat;
}
 
.m04 {
    background: url(../images/new_menu/menu4_1_on.jpg) no-repeat;
}
 
.m05 {
    background: url(../images/new_menu/menu5_1_on.jpg) no-repeat;
}
 
.m06 {
    background: url(../images/new_menu/menu6_1_on.jpg) no-repeat;
}
 
.m01 a,.m02 a,.m03 a,.m04 a,.m05 a,.m06 a {
    display: inline-block;
}
 
.m01 a:hover img,.m02 a:hover img,.m03 a:hover img,.m04 a:hover img,.m05 a:hover img,.m06 a:hover img {
    visibility: hidden;
}
*/

#header,#header_2,box0,.box21_d {
    z-index: 1;
}

/*=============================================== 
	コンテンツ部分
===============================================*/
@media screen and (max-width: 640px) {
  #container {
    width: 100%;
	border: none;
	padding-top: 120px;
  }
  #sub {
    display: none;
	margin: 0;
	padding: 0;
  }
  .spsub .secondmenu li{
	font-size: 1.4em;
	line-height: 1.8;
  }
  #container #sub_left {display: none!important;margin: 0!important;padding: 0!important;}
  #site_srch {
	height: auto;
	margin: 10px auto;
	text-align: center;
  }
  #site_srch_h {
	height: auto;
	margin: 10px auto;
	text-align: center;
  }
  #srch_box {
	position: relative;
	white-space: nowrap;
	letter-spacing: normal;
	margin: 10px auto;
	  padding: 10px;
	outline: 0;
	width: 365px!important;
  }
  #srch_box_h {
	position: relative;
	white-space: nowrap;
	letter-spacing: normal;
	margin: 10px auto;
	  padding: 10px;
	outline: 0;
	width: 365px!important;
  }
  #srch_btn {
	position: relative;
	  width: 50px;
	  height: 50px;
	  background-size: cover;
  }
}

#main {
    float: left;
    width: 815px;
    margin-left: 10px;
    margin-bottom: 30px;
    margin-top: 0;
    padding-top: 0;
}
@media screen and (max-width: 640px) {
  #main {
    width: 100%;
    margin: 0;
  }
}

#main p{
    margin: 0;
}

#main2_top {
    float: left;
    width: 600px;
    margin-left: 15px;
    margin-bottom: 30px;
    margin-top: 0;
    padding-top: 0;
}
@media screen and (max-width: 640px) {
  #main2_top {
    width: 100%;
    margin: 0;
  }
  #sub_top {
    width: 30%;
	float: left;
	margin-left: 15px;
  }
}

#main2_top p{
    margin: 0;
}
#main2_top .titlekyoukai {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #3366FF;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
  margin: 1em 0 0.2em;
}
@media screen and (max-width: 640px) {
  #main2_top .titlekyoukai {
    margin: 0 auto;
	  width: 94%;
	  font-size: 1.5rem;
  }
}


#main2 {
    float: left;
    width: 730px;
    margin-left: 15px;
    margin-bottom: 30px;
    margin-top: 0;
    padding-top: 0;
}
@media screen and (max-width: 640px) {
  #main2 {
    width: 100%;
    margin: 0;
  }
}


#main2 p{
    margin: 0;
}
#main2 .titlekyoukai {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #3366FF;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
  margin: 1em 0 0.2em;
}
@media screen and (max-width: 640px) {
  #main2 .titlekyoukai {
    margin: 0 auto;
	  width: 94%;
	  font-size: 1.5rem;
  }
}
#main2 .pink{
  border-left: solid 5px #ff3284!important;/*左線*/
}
#main2_top .pink{
  border-left: solid 5px #ff3284!important;/*左線*/
}
#main2 .blue{
  border-left: solid 5px #00ccff!important;/*左線*/
}

#main2 .green{
  border-left: solid 5px #2D9934!important;/*左線*/
}

#main2 .brown{
  border-left: solid 5px #999933!important;/*左線*/
}

#main2 .emerald{
  border-left: solid 5px #06D07F!important;/*左線*/
}

#main3 {
    float: left;
    width: 730px;
    margin-left: 15px;
    margin-bottom: 30px;
    margin-top: 0;
    padding-top: 0;
}
@media screen and (max-width: 640px) {
  #main3 {
    width: 100%;
    margin: 0;
  }
}

#main3 p{
    margin: 0;
}
#main3 .titlekyoukai {
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #3366FF;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
  margin: 1em 0 0.2em;
}
@media screen and (max-width: 640px) {
  #main3 .titlekyoukai {
    margin: 0 auto;
	  width: 94%;
	  font-size: 1.5rem;
  }
}
#main3 .green{
  border-left: solid 5px #2D9934!important;/*左線*/
}
#main3 .emerald{
  border-left: solid 5px #06D07F!important;/*左線*/
}
#main3 .brown{
  border-left: solid 5px #999933!important;/*左線*/
}
#main3 table{
    color: #666;
	padding: 10px 0;
}
@media screen and (max-width: 640px) {
  #main3 table {
    margin: 0 auto;
	  width: 98%;
  }
}
#main3 table th{
    vertical-align: top;
	width: 120px;
}
#main3 table li{
    list-style: disc;
	margin-left: 15px;
}

.title01 {
    background-color: #3366FF;
    text-align: center;
    margin-top: 15px!important;
	margin-bottom: 20px!important;
    font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    font-size: 1.1rem;
	font-weight: bold;
    color: #fff;
    padding: 3px 0;
}
.title01 span{
    background-color: #fff;
	color: #CC0000;
	padding: 3px 10px;
	margin-right: 10px;
	font-weight: bold;
	border-radius: 3px;
}
.title01 a{
    color: #fff!important;
    /*font-weight: normal; */
	font-weight: bold;
    letter-spacing: 4px;
	display: block;
}
@media screen and (max-width: 640px) {
  .title01{
	margin: 0 auto 20px!important;
	width: 98%;
	font-size: 1.0rem;
  }
}

.title02 span{
	margin: 0;
	position: relative;
	display: inline-block;
	background-color: #fff;
	color: #333399;
	margin-left: 0px;
	padding: 0 10px;
	font-size: 1.2rem;
	font-weight: bold;
}

.title02 {
	position: relative;
	margin-bottom: 15px;
}

.title02:before {
	content:  '';
	background-color: #ADADD6;
	display: block;
	position: absolute;
	width: 100%;
	height: 2px;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
@media screen and (max-width: 640px) {
  .title02{
	margin: 0 auto!important;
	width: 98%;
  }
}

.title03 {
    background-color: #F2D8FF;
    text-align: center;
    margin-top: 15px!important;
	margin-bottom: 20px!important;
    font-size: 0.9rem;
    color: #3366FF;
    padding: 3px 0;
	font-weight: bold;
	border: 2px solid #EC8EAB;
}
.title03 a{
    color: #3366FF!important;
    font-weight: normal;
    letter-spacing: 2px;
	display: block;
}
@media screen and (max-width: 640px) {
  .title03{
	margin: 0 auto 20px!important;
	width: 98%;
    font-size: 0.8rem;
  }
}

.titlesym {
    font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	border: 2px solid #06D07F;
	border-radius: 5px;
	text-align: center;
    margin-top: 15px!important;
	margin-bottom: 20px!important;
    font-size: 1.4rem;
	font-weight: bold;
    color: #83e8bf;
    padding: 3px 0 0 0;
	line-height: 1.5;
	letter-spacing: 1px;
}
.sym1{
    display: block;
    color: #399394;
	padding: 3px 10px;
	text-align: center;
	font-size: 1.0rem;
	font-weight: bold;
}
.symttl{
    color: #399394;
	padding: 3px 10px;
	font-size: 1.4rem;
	font-weight: bold;
}

.sym2{
	color: #39936f;
	padding: 3px 5px;
	font-size: 1.0rem;
	font-weight: bold;
}

.sym3{
    display: block;
	background: #06D07F;
    color: #fff;
	padding: 3px 0 2px 0;
	margin: 0;
	text-align: center;
	font-size: 1.0rem;
	font-weight: bold;
}

.titlesym a{
    color: #83e8bf!important;
	display: block;
	text-decoration: none;
}

@media screen and (max-width: 640px) {
  .titlesym{
	margin: 0 auto 20px!important;
	width: 98%;
  }
  .symttl {
  font-size: 20px;
  }
  .sym1 {
      font-size: 13px;
  }
  .sym3 {
      font-size: 0.8rem;
  }
}

.sym_all {
    font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	border: 2px solid #06D07F;
	border-radius: 5px;
    margin-top: 15px!important;
	margin-bottom: 20px!important;
    font-size: 1.4rem;
	font-weight: bold;
    color: #83e8bf;
    padding: 0 0 0 0;
	line-height: 1.5;
	letter-spacing: 1px;
	position: relative;
}


/* aタグの設定 この部分は
一時的に無効化しています(シンポリーフレット用；部分リンク時)現在は有効*/
.sym_all a{
    position: absolute;
	display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.sym_all_ttl{
    display: block;
	background: #06D07F;
    color: #fff;
	padding: 0px 0px 2px 0;
	margin: 0;
	text-align: center;
	font-size: 1.1rem;
	font-weight: bold;
}

.sym_all_ttl_ond {
    display: block;
	background: #06D07F;
    color: #fff;
	padding: 0px 0px 2px 0;
	margin: 0;
	text-align: center;
	font-size: 1.1rem;
	font-weight: bold;
}

.flex_sym {
display: flex;
flex-diretion: row;  /*アイテムの並び順・配置の向き*/
flex-wrap: nowrap;  /*折り返し*/
align-items: stretch;  /*垂直方向の位置*/
    font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    font-size: 1.4rem;
	font-weight: bold;
    color: #399394;
    padding: 3px 0 0 0;
	letter-spacing: 1px;
}

.f_item_1 {
flex-basis: 20%;   /*アイテムの伸び率、縮み率、基本幅*/
padding: 0 0 0 8px;
font-size:1.0rem;
font-weight:bold;
letter-spacing:0.08em;
text-align: left;
display: flex;
align-items: flex-start;
vertical-align: top;
}

.f_item_2 {
flex-basis: 80%;   /*アイテムの伸び率、縮み率、基本幅*/
padding: 0;
font-size:1.0rem;
font-weight:bold;
letter-spacing:0.08em;
margin-left: 20px;
display: flex;
align-items: center;
}

.f_item_3 {
flex-basis: 80%;   /*アイテムの伸び率、縮み率、基本幅*/
padding: 0;
font-size:0.8rem;
font-weight:bold;
letter-spacing:0.08em;
margin-left: 20px;
text-align: left;
display: flex;
align-items: center;
}

@media screen and (max-width: 640px) {
  .sym_all{
	margin: 0 auto 20px!important;
	width: 98%;
  }
  .sym_all_ttl {
  font-size: 0.9rem;
  }
  .sym_all_ttl_ond {
  font-size: 0.8rem;
  }
  .f_item_1 {
      flex-basis: 25%;
font-size: 0.8rem;
  }
  .f_item_2 {
      flex-basis: 80%;
font-size: 0.8rem;
  }
    .f_item_3 {
      flex-basis: 80%;
font-size: 0.8rem;
  }
}



.titlepmsemi {
    font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	background: #fff;
	border: 2px solid #b0e0e6;
	border-radius: 5px;
	text-align: center;
    margin-top: 15px!important;
	margin-bottom: 20px!important;
    font-size: 1.4rem;
	font-weight: bold;
    color: #83e8bf;
    padding: 3px 0 0 0;
	line-height: 1.5;
	letter-spacing: 1px;
}
.pmsemi1{
    display: block;
    color: #3300cc;
	padding: 3px 10px;
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
}
.pmsemittl{
    color: #3300cc;
	padding: 3px 10px;
	font-size: 1.4rem;
	font-weight: bold;
}

.pmsemi3{
    display: block;
	background: #b0e0e6;
    color: #3300cc;
	padding: 3px 0 2px 0;
	margin: 0;
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
}

.titlepmsemi a{
    color: #83e8bf!important;
	display: block;
	text-decoration: none;
}

@media screen and (max-width: 640px) {
  .titlepmsemi{
	margin: 0 auto 20px!important;
	width: 98%;
  }
  .pmsemittl {
  font-size: 20px;
  }
  .pmsemi1 {
      font-size: 1.1rem;
  }
  .pmsemi3 {
      font-size: 1.1rem;
  }
}

@media screen and (min-width: 640px) {
.sp_br{
    display: none;
  }
}
@media screen and (max-width: 640px) {
.sp_br{
    display: inline;
  }
}
.btn{    
	display:flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content:space-between;
	margin-top: 15px;
	margin-bottom: 10px;
	text-align: center;
}
  .btn .btn01{
	width: 14%;
}
  .btn .btn02{
	width: 16%;
}
  .btn .btn03{
	width: 14%;
}
  .btn .btn04{
	width: 14%;
}
  .btn .btn05{
	width: 22%;
}
@media screen and (max-width: 640px) {
  .btn{
    margin: 0 auto;
    width: 98%;
    justify-content: flex-start; /* space-betweenから変更 */
    gap: 0.5%; /* より小さい間隔に */
  }
  .btn li{
    margin-bottom: 1em;
    text-align: center;	
    padding: 0!important; /* 全てのpaddingを削除 */
    box-sizing: border-box; /* 追加 */
  }
  .btn .btn01{
    width: 24.5%; /* 4つで98% + gap3つで1.5% = 99.5% */
  }
  .btn .btn02{
    width: 24.5%;
  }
  .btn .btn03{
    width: 24.5%;
  }
  .btn .btn04{
    width: 24.5%;
  }
  .btn .btn05{
    width: 100%;
    margin-top: 0; /* btn05の上の余白を調整 */
  }
}
.btn li{
    list-style: none!important;
    padding: 2px 5px!important;

}
.btn .btn01{
    border: 2px solid #C23263;
}
.btn .btn02{
    border: 2px solid #A25869;
}
.btn .btn03{
    border: 2px solid #EC8EAB;
}
.btn .btn04{
    border: 2px solid #538B80;
}
.btn .btn05{
    background: #f4f4f4;
    border: 3px solid #3366FF;
    border-radius: 16px;
	font-weight: bold;
}
.btn li a{
	color: #4B4396!important;
	font-size: 15px!important;
}
ul.btn li:last-child a{
  color: #3366FF!important;
}
/*
.btn li a:hover{
	opacity: 0.5;
	transition: 0.5s;
}
*/

.menu{    
	display:flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content:space-between;
	margin-bottom: 10px;
}
.menu img{
	width: 100%;
}
.menu li{
    list-style: none!important;
    margin:0px!important;
    padding:0px!important;
	line-height: 45px!important;
	width: 260px;
}
.menu li a:hover{
	opacity: 0.5;
	transition: 0.5s;
}
@media screen and (max-width: 640px) {
  .menu{
	margin: 0 auto 10px!important;
	width: 98%;
  }
  .menu li{
	width: 49%;
  }
}

.menu_banner{    
	display:flex;
	flex-wrap: wrap;
	/*flex-wrap: nowrap;*/
	width: 100%;
	justify-content:space-between;
	margin-bottom: 10px;
}
.menu_banner img{
	width: 100%;
}
.menu_banner li{
    list-style: none!important;
    margin:0 auto!important;
    padding:0px!important;
	line-height: 45px!important;
	width: 200px;
}
.menu_banner li a:hover{
	opacity: 0.5;
	transition: 0.5s;
}
@media screen and (max-width: 640px) {
  .menu_banner{
	margin: 0 auto 10px!important;
	width: 98%;
  }
  .menu_banner li{
	width: 46%;
  }
}

/* ========== ページ下SNSへのリンク設定 ========== */
/* このブロックだけ追加（上書き用） */
.sns-panel{
  /*padding: 14px 16px 16px;*/
  padding: 18px 16px 22px;
  background: /*#f5f7fa*/ #eef3f8;              /* 薄いグレー or ブランドに寄せた色 */
  border: 1px solid #d9dde3;
  border-radius: 6px;               /* 角は控えめ */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sns-panel__title{
  margin: 0 0 /*12px*/ 20px;
  margin-bottom: 20px!important;
  text-align: center;
  font-size: 13px;
  font-family: "メイリオ", "Arial";
  font-weight: 600;
  letter-spacing: .08em;
  color: #333;
}

/* ===== PC：1列に固定して「左SNS + 右バナー2枚」を横一列に ===== */

.menu_banner--mix{
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: space-between;   /* ← ここがポイント（右端まで使う） */
  align-items: stretch;   /* ★ center → stretch */
}

.menu_banner--mix li{
  margin: 0 !important;
  line-height: normal !important;
}

/* ===== 右：画像バナー（200×150で揃える／画像は中央トリミング） ===== */
.menu_banner--mix .banner-item{
  width: 200px !important;
  height: auto;
  overflow: hidden;
  /*border-radius: 8px;*/
}
/*.menu_banner--mix .banner-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}*/
.banner-item img{
  object-fit: contain;
  background: #fff; /* or #f5f5f5 */
}
@media screen and (max-width: 640px){
.menu_banner--mix .banner-item img{
  object-fit: contain;
  background: #fff; /* or #f5f5f5 */
}
}

/* ===== 左：SNSブロック（高さを右バナーと揃える） ===== */


.menu_banner--mix .sns-wrap{
  flex: 1 1 auto;       /* ★ 固定をやめて伸びる */
  width: auto;          /* ★ 390px固定をやめる */
  min-width: 320px;     /* 任意：潰れ防止（300〜360で調整） */
  max-width: 390px;   /* ★上限を固定したい場合 */
  /*height: 150px;*/
  height: 100%;
  padding: 0 !important;
  display: flex;
  align-items: center;
}

/* 上2 / 下3 を作る（6列×2行に配置） */
/*.sns-grid{
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  align-items: center;
}

.sns-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  justify-items: center;
  align-items: center;
}*/


/* 5個横一列：間隔=20px（ロゴの半分） */
.sns-grid{
  display: flex;
  justify-content: space-between;  /* ← 左端と右端を外側へ */
  align-items: center;
  width: 100%;
  gap: 20px;   /* ← 最低限の間隔（好みで 12〜18） */
  padding: 0 10px;          /* 端の余白（必要なら20pxに） */
  box-sizing: border-box;
}


/* SNS1枠 */
/* sns-itemの横幅を増やさない */
.sns-item{
  padding: 6px 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
}

/* SVGの表示サイズ（四角アイコン） */
.sns-ico{
  width: /*48px*/ 40px;
  height: /*48px*/ 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sns-ico img,
.sns-ico svg{
  max-width: /*48px*/ 40px;
  max-height: /*48px*/ 40px;
  width: auto;
  height: auto;
  display: block;
}

.sns-ico img.sns-img--x{
  transform: scale(0.82);
  transform-origin: center;
}

/* テキスト */
.sns-txt{
  font-size: 11px;
  font-family: "メイリオ", "Arial";
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Instagramだけ：既存CSSでfillが潰されても復旧できるように強制 */
.sns-svg--ig .ig-bg1{ fill: url(#ig_c) !important; }
.sns-svg--ig .ig-bg2{ fill: url(#ig_d) !important; }
.sns-svg--ig .ig-fg{  fill: #fff !important; }

/* Instagram（img）のサイズ調整 */
.sns-item--img .sns-img{
  width: 48px;
  height: 48px;
  display: block;
}

/* まず通常状態に transition を置くのがコツ */
.sns-ico{
  transition: transform 0.25s ease;
}

/* hover時の「浮く動き」は枠に */
.sns-item:hover .sns-ico{
  transform: translateY(-3px);
}

/* 影は中身に（PNGもSVGも同じ） */
.sns-ico img,
.sns-ico svg{
  transition: filter 0.25s ease;
}

.sns-item:hover .sns-ico img,
.sns-item:hover .sns-ico svg{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.25));
}



/* ===== スマホ：1列でOK ===== */
@media screen and (max-width: 640px){

  .menu_banner--mix{
    flex-wrap: wrap !important;
  }

  /* ★SNSブロック：幅制限を完全解除して全幅に */
  .menu_banner--mix .sns-wrap{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;     /* ← 大事 */
    margin: 0 0 16px !important;

    display: flex !important;
    justify-content: center !important;  /* ブロックを中央に */
    align-items: center !important;
    height: auto !important;
  }

  /* ★パネルも中央・全幅 */
  .menu_banner--mix .sns-panel{
    width: 100% !important;
    max-width: 100% !important;     /* 念のため */
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* ★アイコン列：中央寄せ＋間隔確保（くっつき防止） */
  .menu_banner--mix .sns-grid{
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;  /* center → space-between */
    gap: 0 !important;                          /* gap（間隔）は0に（両立しにくい） */
    padding: 0 18px !important;                  /* 端の余白（14〜22で調整） */
    box-sizing: border-box !important;
  }

  /* ★均等割りをやめる（これが残ると詰まって見える） */
  .menu_banner--mix .sns-item{
    flex: 0 0 auto !important;
    padding: 6px 0 !important;
  }

  /* アイコンサイズ：スマホは少し小さめが安定 */
  .menu_banner--mix .sns-ico{
    width: 40px !important;
    height: 40px !important;
  }
  .menu_banner--mix .sns-ico img,
  .menu_banner--mix .sns-ico svg{
    max-width: 40px !important;
    max-height: 40px !important;
  }

  /* 右バナー2枚：2列 */
  .menu_banner--mix .banner-item{
    flex: 0 0 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    height: 170px !important; /* 好みで120〜150 */
  }
  
  .menu_banner--mix .banner-item img{
    width: 100%;
    height: 170px;
    /*object-fit: cover;*/
	object-fit: contain;
  }
}

@media screen and (max-width: 640px){
  .menu_banner--mix{
    align-items: initial;
  }

  .menu_banner--mix .sns-wrap,
  .sns-panel{
    height: auto;
  }
}

.secondmenu{    
	display:flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content:space-between;
	margin-bottom: 10px;
}
.secondmenu::after {
	display: block;/*見えない要素*/
	content:"";
	width: 230px;
}
.secondmenu li{
    list-style: none;
    padding: 0;
	line-height: 25px;
	width: 225px;
}
#pink .secondmenu li,#blue .secondmenu li{
	width: 350px;
}
#green .secondmenu li,#emerald .secondmenu li,#brown .secondmenu li{
	width: 350px;
}
.secondmenu .pm5 {
    margin-bottom: 0px!important;
	padding-left: 5px;
}
.secondmenu li a:hover{
	opacity: 0.5;
	transition: 0.5s;
}
.secondmenu li a {
    padding: 2px 0 2px 16px;
    background: url(../images/yaji_red.gif) no-repeat 4px 0.45em;
}
.secondmenu dd {
	font-weight: bold;
	color: #333;
}
.secondmenu dd a {
    padding: 2px 0 10px 20px;
    background: url(../images/bg_menu_list1.gif) no-repeat 2px 8px;
	border-bottom: 1px dashed #3366FF;
	display: block;
	font-weight: normal;
}
.secondmenu dl{
	margin-top: 10px;
	margin-bottom: 30px;
}
@media screen and (max-width: 640px) {
  .secondmenu dl{
	margin-bottom: 10px;
  }
}



.secondmenu dt{
	background: #7298ff;
	color: #fff;
	font-size: 1.2em;
	text-align: center;
	margin-bottom: 10px;
	padding: 10px 20px;
}
#pink .secondmenu dt{
	background: #ff72aa;
}
#green .secondmenu dt{
	background: #2D9934;
}
#emerald .secondmenu dt{
	background: #06D07F;
}
#brown .secondmenu dt{
	background: #c5c552;
}
#blue .secondmenu dt{
	background: #72e2ff;
}
.secondmenu dd,.secondmenu ul li{
	margin: 0;
	padding: 5px 0;
}
.txtl2 {
	font-size: 13px;
	color: #666;
	line-height: 26px;
	width: 98%;
}
.txtl3 {
	font-size: 13px;
	line-height: 26px;
	color: #666;
	width: 98%;
}
.txtl3l {
	font-size: 16px;
	line-height: 26px;
	color: #666;
	width: 98%;
}
.tableBox{
	
}
.tableBox th{
	width: 140px;
	vertical-align: top;
}
.tableBox li{
	list-style-type: disc;
	margin-left: 20px;
}
.Button ul li{
    margin: 20px;
}
.pinkButton ul li{
    margin: 20px auto;
	width: 60%;
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    background: #ff0066;
    border: 1px solid #ff0066;
    border-radius: 4px;
	text-align: center;
}
.pinkButton a{
    color: #fff;
}
.greenButton {
    margin: 20px auto;
	width: 78%;
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    background: #2D9934;
    border: 1px solid #2D9934;
    border-radius: 4px;
	text-align: center;
}
.greenButton a{
    color: #fff;
}
@media screen and (max-width: 640px) {
.greenButton {
font-size: 0.9em;
}
}
@media screen and (max-width: 640px) {
  .secondmenu{
	margin: 0 auto 10px;
	width: 98%;
  }
  .secondmenu li,#pink .secondmenu li,#green .secondmenu li,#emerald .secondmenu li,#brown .secondmenu li,#blue .secondmenu li{
	width: 49%;
	font-size: 1.2rem;
  }
  .secondmenu .pm5 li{
	width: 100%;
  }
  .txtl2 {
    margin: 20px auto 0px!important;
    font-size: 0.8em!important;
	  line-height: 1.6;
  }
  .txtl3 {
    margin: 20px auto 0px!important;
    font-size: 1.4em!important;
  }
  .txtl3l {
    margin: 20px auto 0px!important;
    font-size: 1.4rem!important;
  }
}

.info li{
	border-bottom: solid 1px #ccc;
	padding: 5px!important;
	font-weight: bold;
	list-style: url(../images/yaji_red3.gif) inside;
}
.info li:last-child{
	border-bottom: none;
	margin-bottom: 20px;
}
@media screen and (max-width: 640px) {
  .info{
	margin: 0 auto!important;
	width: 98%;
	font-size: 0.7rem;
  }
  .info li{
	line-height: 1.7!important;
  }

}

.news dl{
	display:flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.news dt{
	width: 16%;
	padding: 5px;
	box-sizing: border-box;
	border-bottom: 1px solid #ccc; 
}
.news dt img{
	padding-left: 5px;
}
.news dd{
	width: 84%;
	padding: 5px;
	margin: 0;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	box-sizing: border-box;
}
@media screen and (max-width: 640px) {
  .news{
	margin: 0 auto 20px!important;
	width: 98%;
  }
  .news dt{
	width: 21%;
  }
  .news dd{
	width: 79%;
  }
  .mr{margin-right: 8px!important;}
  #footer{margin: 0!important;}
}