@charset "utf-8";


/*---------------------------------------------------------------------------------------
	Overall settings
----------------------------------------------------------------------------------------*/

body{ min-width: 1300px; color: #0F1111; text-align: center; overflow-x: hidden;}
body.ovh{ position: fixed; left: 0; top: 0; width: 100%; height: 100vh;}
#wrapper{ position: relative; background: url("../img/header-bg.jpg") center top / 1240px auto no-repeat;}
#wrapper:before, #wrapper:after{ display: block; content: ""; position: absolute; left: 0; width: 100%; z-index: -1;}
#wrapper:before{ top: 0; height: 260px; background: linear-gradient(to bottom, rgba(255,255,255,1) 60%,rgba(253,249,245,1) 100%);}
#wrapper:after{ top: 260px; height: calc(100% - 260px); background: linear-gradient(to bottom, rgba(253,249,245,1) 0%,rgba(245,214,184,1) 50%,rgba(245,214,184,1) 100%); z-index: -2;}
a{ color: #0F1111; text-decoration:none; -webkit-transition: all .2s; transition: all .2s;}
a:hover{ opacity: .5; text-decoration:none;}
.underline{ text-decoration: underline;}
/* font */
.gothic{ font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;}
.mincho{ font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}
/* bg */
.bg-white{ background: #fff;}
.bg-gray{ background: #F6F2F2;}
.bg-gray2{ background: #999!important;}
/* color */
.white{ color: #fff;}
.red{ color: #FC171E;}
.orange{ color: #f63;}
.green{ color: #12A531;}
.pingre{ color: #F3584C;}
.yellow{ color: #ECB10A;}



/*---------------------------------------------------------------------------------------
	header
----------------------------------------------------------------------------------------*/

header{ display: flex; justify-content: space-between; width: 1240px; margin: 0 auto 40px;}
header h1{ width: 290px; padding-top: 30px; font-size: 18px; line-height: 2;}
header h1 a{ color: #888;}
header h1 a:hover{ opacity: 1;}
header nav{ flex: 1; display: flex; align-items: center; justify-content: flex-end; height: 140px;}
header nav .name{ font-weight: bold; white-space: nowrap;}
header nav .btn{ margin: 0 1.5em; font-size: 12px;}
header nav .btn span{ position: relative;}
header nav .btn span strong{ display: inline-block; position: absolute; right: -1.5em; top: -1em; padding: 0 .2em; min-width: 24px; line-height: 24px; color: #fff; background: #FC171E; border-radius: 12px;}
header nav ul{ display: flex; height: 140px; padding-top: 50px; background: #12A531; position: relative;}
header nav ul:before{ display: block; content: ""; position: absolute; left: 100%; top: 0; width: calc(50vw - (1240px / 2)); height: 140px; background: #12A531;}
header nav ul li{ margin-left: 35px;}
header nav ul li button{ color: #fff; font-size: 12px;}



/*---------------------------------------------------------------------------------------
	section
----------------------------------------------------------------------------------------*/

section{ width: 1200px; min-height: calc(100vh - 180px - 262px); margin: 0 auto;}
section.twocolumn{ display: flex; flex-direction: row-reverse; justify-content: space-between;}
/* parts */
.ttlbtnwarp{ position: relative;}
.ttlbtnwarp a{ position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.ttlimg{ display: flex; align-items: center;}
.ttlimg img{ margin-right: 10px;}
.btnAC{ padding: 0 1em; color: #DF5656; font-weight: bold; line-height: 30px; border: 2px solid #DF5656; border-radius: 5px;}
.btnAC.open{ color: #22BB3F; font-weight: bold; line-height: 30px; border: 2px solid #22BB3F; border-radius: 5px;}
.btn1{ display: inline-block; width: 180px; line-height: 30px; color: #12A531; font-size: 14px; font-weight: bold; text-align: center; background: url(../img/ic-right.svg) right 15px center no-repeat; border: 1px solid #12A531; border-radius: 100px;}
.btn1.noarrow{ background: none;}
.btn2{ display: flex; justify-content: center; color: #fff; font-size: 18px; font-weight: bold; line-height: 60px; text-align: center; background: url(../img/ic-right2.svg) right 30px center no-repeat #f63; border-radius: 100px;}
.btn2.noarrow{ background: #f63;}
.btn2 img{ margin-left: 1em;}
.btn3{ padding: .2em 1em; color: #fff; font-weight: bold; background: #f63; border-radius: 100px; position: relative;}
.btn3 strong{ display: inline-block; position: absolute; left: 100%; top: -10px; margin-left: -10px; padding: 0 .2em; min-width: 24px; line-height: 24px; color: #fff; font-size: 12px; background: #FC171E; border-radius: 12px;}
.btn4{ padding: 0 60px 0 40px; color: #fff; font-size: 18px; font-weight: bold; line-height: 60px; text-align: center; background: url(../img/ic-right2.svg) right 30px center no-repeat #f63; border-radius: 100px;}
.btn4.noarrow{ padding: 0 40px; background: #f63;}
.btn5{ padding: 0 40px 0 60px; color: #12A531; font-size: 18px; font-weight: bold; line-height: 56px; text-align: center; background: url(../img/ic-left.svg) left 30px center / 8px auto no-repeat; border: 2px solid #12A531; border-radius: 100px;}
.btn5.noarrow{ padding: 0 40px; background: none;}
.btn6{ width: 100%; max-width: 450px; margin: 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: bold; line-height: 50px; text-align: center; background: url(../img/ic-right2.svg) right 30px center no-repeat #12A531; border-radius: 100px;}
.btn6.noarrow{ background: #12A531;}
.btn6 img{ margin-left: 1em;}
.btn7{ padding: 0 40px 0 60px; color: #fff; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center; background: url(../img/ic-left2.svg) left 30px center no-repeat #999; border-radius: 100px;}
.btn7.noarrow{ padding: 0 40px; background: #999;}
.btn8{ display: inline-block; width: 180px; line-height: 30px; color: #fff; font-size: 14px; font-weight: bold; text-align: center; background: #12A531; border-radius: 100px;}
.w250{ min-width: 250px;}
.icon-green, .icon-pingre, .icon-yellow{ padding-left: 1.5em; position: relative;}
.icon-green:before{ content: "●"; color: #12A531; position: absolute; left: 0;}
.icon-pingre:before{ content: "●"; color: #F3584C; position: absolute; left: 0;}
.icon-yellow:before{ content: "●"; color: #ECB10A; position: absolute; left: 0;}
.table1{ width: 100%; line-height: 1.4; text-align: center;}
.table1 .set th, .table1 .set td{ background: #FDF3E9;}
.table1 th{ padding: .8em 0; color: #fff; font-weight: bold; vertical-align: middle; background: #4C564F;}
.table1 th:not(:last-child){ border-right: 1px solid #707070;}
.table1 td{ padding: .8em .5em; vertical-align: middle; border-bottom: 1px solid #aaa;}
.table1 td .seticon{ padding: .2em 1em; color: #fff; background: #12A531; border-radius: 100px;}
.table1 .total td{ padding: .8em .5em; background: #D3E1A2;}

.table2{ line-height: 1.4; border-top: 1px solid #aaa;}
.table2.max{ width: 100%;}
.table2 th{ padding: .8em 0; color: #fff; font-weight: bold; text-align: center; vertical-align: middle; background: #4C564F;}
.table2 tr:not(:last-child) th{ border-bottom: 1px solid #707070;}
.table2 tr:not(:last-child) td{ border-bottom: 1px solid #aaa;}
.table2 td{ padding: .8em 1.5em; vertical-align: middle; border-bottom: 1px solid #aaa;}
.table2 td dl{ display: flex; line-height: 30px;}
.table2 td dl dt{ padding-right: 1em;}
.prev{ padding: 0 10px 0 25px!important; line-height: 30px; background: url(../img/ic-prev.svg) left 10px center no-repeat #fff!important; border: 1px solid #78867C; border-radius: 3px;}
.next{ padding: 0 25px 0 10px!important; line-height: 30px; background: url(../img/ic-next.svg) right 10px center no-repeat #fff!important; border: 1px solid #78867C; border-radius: 3px;}
.pager{ margin-left: -50px; margin-right: -50px; padding: 12px 50px; overflow: hidden;}
.pager .prev{ float: left;}
.pager .next{ float: right;}
.pager2{ margin-left: -50px; margin-right: -50px; padding: 12px 50px; display: flex; align-items: center; justify-content: center;}
.pager2 button{ margin: 0 5px; padding: 0 10px; line-height: 30px; background: #fff; border: 1px solid #78867C; border-radius: 3px;}
.pager2 button.active{ color: #fff; background: #78867C;}
.pager2 .prev{ margin-right: 20px!important;}
.pager2 .next{ margin-left: 20px!important;}
.pager2 button.nolink{ pointer-events: none; color: #999; opacity: .5;}
.pager3{ margin-left: -50px; margin-right: -50px; padding: 12px 50px; display: flex; align-items: center; justify-content: space-between;}
.pager3 span{ display: flex; align-items: center;}
input.max{ width: 100%;}
input.w60{ width: 60px;}
input.w200{ width: 200px;}
input.w500,
textarea.w500{ width: 500px;}
/* wrap */
.wrap{ padding: 30px 50px 40px; text-align: left; background: #fff;}
/* main */
.main{ width: 900px; text-align: left;}
.main article{ padding: 30px 50px 40px; margin-bottom: 10px; background: #fff;}
.topics dl{ display: flex; padding: .5em 1em; border-bottom: 1px solid #aaa;}
.topics dl dt{ width: 10em;}
.topics dl dt span{ display: inline-block; padding: 0 .5em; margin-left: .8em; color: #F3584C; font-size: 12px; font-weight: bold; line-height: 1.2; border: 1px solid #F3584C; border-radius: 3px;}
.topics dl dd{ flex: 1;}
.topicsdetail{ padding-bottom: 20px;}
.topicsdetail h3 span{ display: inline-block; padding: 0 .5em; margin-right: .8em; color: #F3584C; font-size: 12px; font-weight: bold; line-height: 1.2; border: 1px solid #F3584C; border-radius: 3px;}
.topicsdetail p{ margin-bottom: 30px;}
.topicsdetail figure{ margin-bottom: 10px;}
.topicsdetail figure img{ margin-bottom: 30px;}
.topicsdetail figure img{ margin-bottom: 30px;}
.filelink{ margin-bottom: 30px;}
.filelink li{ padding-left: 30px; margin-bottom: 10px;}
.filelink li.pdf{ background: url("../img/ic-pdf.png") left top 3px no-repeat;}
.filelink li.word{ background: url("../img/ic-word.png") left top 3px no-repeat;}
.filelink li.excel{ background: url("../img/ic-excel.png") left top 3px no-repeat;}
.filelink li.pp{ background: url("../img/ic-pp.png") left top 3px no-repeat;}
.filelink li.file{ background: url("../img/ic-file.png") left top 3px no-repeat;}
.about{ display: flex;}
.about dl{ width: 49%; padding: 20px; border: 1px solid #aaa; border-radius: 15px;}
.about dl:nth-child(2n+1){ margin-right: 2%;}
.info dl{ padding: 20px 0;}
.info dl:not(:last-child){ border-bottom: 1px solid #aaa;}
.result{ margin-left: -50px; margin-right: -50px; padding: 12px 50px; display: flex; align-items: center; justify-content: space-between;}
.result p{ display: flex; align-items: center;}
select.greenarrow{ vertical-align: middle; appearance: none; padding: 0 20px 0 0; margin: 0; line-height: 1.75; height: auto; border: none; background: url(../img/ic-bottom.svg) right center no-repeat;}
.mypagecont{ display: flex; justify-content: center; align-items: center; padding: 20px 20px 10px; margin-bottom: 30px;}
.mypagecont dl{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 270px;}
.mypagecont dl dt{ width: 70px; margin-bottom: 10px;}
.mypagecont dl dd{ width: 200px; margin-bottom: 10px;}
.mypagecont p{ width: 200px; padding-left: 20px;}
.mypagecont p button{ margin-bottom: 10px; margin-left: 10px;}
/* side */
.side{ width: 270px; padding-bottom: 50px; text-align: left; background: #fff;}
.side article{ padding: 20px;}
.side article:not(:last-child){ border-bottom: 1px solid #aaa;}
.side h3{ font-size: 16px; font-weight: bold; margin-bottom: .3em;}
.side .searchbox{ display: flex; margin-bottom: .5em;}
.side .searchbox input{ width: 170px; border-radius: 3px 0 0 3px; border: 1px solid #78867C; border-right: none;}
.side .searchbox button{ display: flex; justify-content: center; align-items: center; width: 60px; color: #fff; background: #4C564F; border-radius: 0 3px 3px 0;}
.side .searchbox button img{ margin-right: 2px;}
.side .searchbox button:hover{ opacity: 1;}
.side ul{ padding-left: 1em;}
.side ul li.ttl{ color: #3EA053; font-weight: bold; padding-left: 1em; text-indent: -1em;}
.side ul li.ttl:before{ content: "・";}
.side ul li.ttl a{ color: #3EA053;}
.side ul li.low{ padding-left: 1em;}
.side ul li.active{ font-size: 16px; font-weight: bold;}



/*---------------------------------------------------------------------------------------
	footer
----------------------------------------------------------------------------------------*/

footer{ border-top: 1px solid #aaa;}
footer .pagetop{ line-height: 60px; background: #F6F2F2;}
footer .pagetop span{ display: inline-block; padding: 0 2em; cursor: pointer;}
footer .footerwrap{ display: flex; justify-content: center; padding: 30px 0 60px; text-align: left; background: #4C564F;}
footer .footerwrap dl{ margin-left: 60px;}