@charset "UTF-8";

.contsTtl .redH {
	background: #d00f31;
}
.redBtn {
	background-color: #d00f31;
	-webkit-box-shadow: 0px -5px 0px 0px #a2031f inset;
	box-shadow: 0px -5px 0px 0px #a2031f inset;
}
.cpBtnY {
	background: #fad025;
	color: #111111;
	-webkit-box-shadow: 0px -5px 0px 0px #b39f3f inset;
	box-shadow: 0px -5px 0px 0px #b39f3f inset;
}
.cpBtnG {
	background: #2dad55;
	-webkit-box-shadow: 0px -5px 0px 0px #1f823e inset;
	box-shadow: 0px -5px 0px 0px #1f823e inset;
}
.dbaraiBtn{
	margin: 0 auto;
	padding: 0 13.54167% 3.125%;
}
.dbaraiList01{
	padding: 0 5%;
	overflow: hidden;
	background: url("../img/imgparts9_2_01_bg.png") repeat-y;
}
.dbaraiList02{
	padding: 0 5%;
	overflow: hidden;
	background: url("../img/imgparts9_5_01_bg.png") repeat-y;
}	
.dbaraiList03{
	padding: 0 5%;
	overflow: hidden;
	background: url("../img/imgparts9_8_01_bg.png") repeat-y;
}
.dbaraiList01 li,
.dbaraiList02 li,
.dbaraiList03 li{
	width: 31.945%;
	float: left;
	margin-right: 2.085%;
}
.dbaraiList01 li:nth-child(3n+0),
.dbaraiList02 li:nth-child(3n+0),
.dbaraiList03 li:nth-child(3n+0){
	margin-right: 0;
	margin-bottom: 3%;
}


/*---------------------------------------------
	レイアウト用
  ---------------------------------------------*/
:root {
  --blue: #00109A;    
  --brown: #604500;
  --red: #FF0000;
  --yellow: #fff9d9;  
  --yellow-dark: #dec37b;
  --beige: #fff7ed;
  --line-height: 2;
  --line-height-s: 1.4;    
}
html{scroll-behavior: smooth;}
body{background-color: #ffffff}
img{width: 100%}
/* 汎用 */
.mt-0 { margin-top: 0px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mb-0 { margin-bottom: 0px !important; }

/* PC/SP 表示切り替え  */
.pc{display: block !important}
.sp{display: none !important}
@media (width <= 768px) {
.pc{display: none !important}
.sp{display: block !important}	      
}

/* flexbox */
.flex,
.flex-left,
.flex-right,
.flex-center{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;}
.flex-left{justify-content: flex-start !important;}
.flex-right{justify-content: flex-end !important;}
.flex-center{justify-content: center !important;}
.flex-align-center{align-items: center !important;}
.flex-align-stretch{align-items: stretch !important;}
.flex-align-end {align-items: flex-end !important;}
.flex-reverse{flex-direction: row-reverse !important}
.flex-all{flex: 1 0 100%}
.flex-fit{flex: 1;}

/* h1 */
#visual-outer{
    background-image: url(../images/visual-bg.jpg);
    background-repeat: repeat;
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
    margin: 0
}
.visual span {
    max-width: 1600px;
    width: 95%;
    margin: 0 auto;
    display: block;
    }
#txt-lead{
    text-align: center;
    font-size: min(4.2vw,24px);
    margin-top: 0;
    color: #ffffff;
    font-weight: bold;
    line-height: 1.6;
}

/* カラム */
.width-50per{width: 50% !important}
.block-medium {width: 65% !important;}
.block-half {width: 48% !important}
.block-small {width: 30% !important}
@media (width <= 768px) {
.width-50per,
.block-medium,
.block-half,
.block-small{width: 100% !important} 
.flex-fit {flex: 0 100%;} 
}

section{
    padding-top: 5rem;
    padding-bottom: 3rem;
}
#anchor_01,
#anchor_03,
#anchor_05{
    background-color: var(--beige);
    background-image: url(../images/bg-kirakira.svg);
    background-repeat: repeat;
    background-size: 400px auto;
    background-position: left top;
}
.box {
    position: relative;
    padding: 7rem 2.5rem 2.5rem;
    background-color: #ffddb7;
    outline: 2px solid #ffffff;
    outline-offset: -1rem;
    margin-top: 60px !important;
}
.box::before {
    position: absolute;
    top: 1.8rem;
    left: 0;
    width: 100%;
    padding: 0.5rem 0;
    background-color: #ff6d00;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    content: attr(data-title);
    font-size: 20px;
}

.flex:not(.flex-reverse) .block-circle{margin-right: 30px}
.flex.flex-reverse .block-circle{margin-left: 30px}

.main-vis .wrp-vis{max-width: 100%}
.l-main {
    position: relative;
    display: block;
    line-height: 1.5;
    font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    overflow: hidden;
    text-align: justify;
    text-justify: inter-ideograph;
}
.l-container {
    box-sizing: content-box;
    padding: 50px 0px 0px;
}
.inner{
    padding: 0 20px;
    max-width: 800px;
    margin: 0 auto;
}
.section-img {
    margin-top: 30px;
    margin-bottom: 30px;
}
@media (width <= 768px) {
.l-container{padding: 50px 0px;}    
.box::before {font-size: 18px;}    
.flex:not(.flex-reverse) .block-circle{margin-right: 0px}
.flex.flex-reverse .block-circle{margin-left: 0px}    
}

/*見出し*/
.section-img__strong{font-weight: bold;}
.ttl{
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
}
section h2.ttl{
    font-size: min(5vw,28px);
    color: #ffffff;
    position: relative;
    margin-bottom: 2.5rem;
    padding: 0.5em .85em;
    border-top: 2px solid var(--brown);
    border-bottom: 2px solid var(--brown);
}
section h2.ttl:before,
section h2.ttl:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: calc(100% + 20px);
    background-color: var(--brown);
}
section h2.ttl:before {left: 10px;}
section h2.ttl:after {right: 10px;}
section h2.ttl span{
    background-color: var(--brown);
    display: block;
    padding: 1.5rem 0.6rem;
}
.h2-icon{position: relative}
.icon{
    max-width: 85px;
    width: 25%;
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
}
section h3.ttl{
    font-size: min(5.5vw,27px);
    margin-top: 4rem;
    margin-bottom: 1.5rem;
}
@media (width <= 768px) {
section h2.ttl span{
    text-align: left;
    padding-left: 1.2rem;
    padding-right: 3rem;
}    
.icon{
    max-width: 65px;
    right: -20px;}    
}
    
/*　ページャー */
.pager{
    border: 2px dashed var(--brown);
    padding: 3rem;
    margin-bottom: 4rem;
}
.pager li{
    background-image: url(../images/icon-head.svg);
    background-repeat: no-repeat;
    background-size: 16px auto;
    background-position: left center;
    padding-left: 20px;
}
.pager li a{
    color: var(--brown);
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
}
@media (width <= 768px) {
.pager{padding: 1.6rem;}   
.pager li{background-position: left top 10px;}    
}
  
/* ボタン */
.btn a {
    max-width: 320px;
    margin: 60px auto;
    padding: 10px 20px 10px 8px;
    font-size: min(4.5vw,22px);
    display: block;
    text-align: center;
    font-weight: bold;
    color: var(--brown);
    border: 1px solid var(--brown);
    background-color: #ffffff;
    position: relative
  }
.btn a:after {
    content: '';
    position: absolute;
    right: 1rem;
    top: calc(100% - 50% - 10px);
    clip-path: polygon(85% 50%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%);
    width: 25px;
    height: 20px;
    background-color: var(--brown);
}
.btn a:hover {
    background-color: var(--brown);
    color: #ffffff;
}
.btn a:hover:after {background-color: #ffffff;}

/* 罫線 */
hr{
    height: 0;
    margin: 2rem 0;
    padding: 0;
    border: 0;
    border-top: 1px dashed var(--brown);
}