@charset "UTF-8";
/* CSS Variables */
:root {
  --color-00: #2cac9f;
  --color-01: #caf1ed;
  --color-02: #8de2d9;
  --color-03: #51d2c5;
  --color-04: #218278;
  --color-05: #1c6d65;
  --color-06: #0d312d;
  --color-white: #f3fcfb;
  --color-red: #aa2c39;
  --color-pink: #d2515e;
  --color-yellow: #f8ea78;
}

/*
var(--color-00, #2CAC9F);
*/


#wrap {
    background: var(--color-02);
}

#header {
    background-color: #222;
    color: #fff;
}

div#logo-wrap {
    height: auto;
}

#contents {
    padding: 0;
    width: 100%;
    background: #fff;
}

[data-main-header]:not([data-main-header*="header"]) #main-header > * {
    margin-top: 0;
}

[data-headerimg-type=""] #headerimg {
    gap: 0;
}

.headerimg-img img {
    border-radius: 0 0 80px 80px;
}

.headerimg-txt {
    padding-left: var(--padding-overall);
    padding-right: var(--padding-overall);
    margin-top: 2em;
}

.headerimg-desc {
    border-bottom: 1px dashed var(--color-04);
    padding-bottom: 1.6rem;
}


#main {
    padding-left: var(--padding-overall);
    padding-right: var(--padding-overall);
}

[data-column="col2"][data-menu="left"] #menu::before {
    background: var(--color-02);
    right: 0;
}

section#text1-section {
    padding-bottom: 3vh;
}

#footer {
    z-index: 11;
    padding-top: 2.5em;
}

#footer .inner {
    gap: 0;
}

#copy::after {
    background: transparent;
}

#footer .inner > *:first-child:not(#copy) {
    margin-top: 0;
}

h1 {
    font-size: 1.6rem;
    margin: 2.4rem 0;
}

h2:not([class*="topic"]) {
    background-color: transparent;
    color: #333;
    margin-top: 0;
    padding: 0;
}

h3:not([class*="topic"]) {
    border-bottom: 1px solid var(--color-04);
    margin-top: 0;
    padding-bottom: .66666em;
    position: relative;
    padding: 1.5rem 1rem;
}

h3:not([class*="topic"]):after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, var(--color-04), var(--color-04) 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, var(--color-04), var(--color-04) 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

h3:first-child {
    border-bottom: 0;
    margin-top: 0;
    padding: 0;
}

h3:first-child:after {
    display: none;
}

h3:first-child:first-letter {
    color: var(--color-05);
    font-size: 1.25em;
    margin-right: .2rem;
}

h4:not([class*="topic"]) {
    background: linear-gradient(transparent 70%, var(--color-01) 70%);
    border-left: 0px;
    padding-left: 0;
    display: inline-block;
}

.bg-wrap > h4:not([class*="topic"]) {
    background: transparent;
    border-top: dotted 1px var(--color-05);
    border-bottom: dotted 1px var(--color-05);
    width: 100%;
    color: var(--color-05);
    padding: 1.6rem .8rem;
}

span[class^="mky_"], font[class^="mky_"] {
    padding: 0;
}

.mky_cyan {
    background: linear-gradient(transparent 85%, var(--color-02) 85%);
}

.mky_yellow {
    background: linear-gradient(transparent 75%, var(--color-yellow) 75%);
}

.bold-red {
    color: var(--color-red);
    font-weight: 600;
}

.bold-cyan {
    color: var(--color-04);
    font-weight: 600;
}

img.image-center {
    margin: 0;
}

.cbox-formal04 .cbox-caption {
    color: var(--color-05);
}

.cbox-formal04::before,
.cbox-formal04::after {
    border-color: var(--color-02);
}

.cbox-formal04 {
    background: var(--color-white);
}

.cbox-body {
    line-height: 1.8;
    display: flex;
    flex-direction: column;
}

.alert, .accept, .attention, .thint {
    line-height: 1.7;
}

#indexlist.idx_design4.cyan .title {
    background-color: var(--color-03);
}

#indexlist.cyan #index_button {
    color: var(--color-03);
}

.footer-menu_ul {
    align-items: center;
}

.footer-menu_ul > li:last-child {
    border-width: 0px;
}

#footer .inner > *:first-child:not(#copy) {
    margin-top: 0;
    margin-bottom: 0;
}

.footer-menu_ul > li {
    padding: 0;
}

#siteNavi {
    z-index: 9998;
    position: relative;
}

#siteNavi ul {
    z-index: 9999;
    position: relative;
}

.menubox .sitemenu a::after {
    border-bottom: 1px dashed var(--color-03);
}

.menubox .sitemenu li:last-child a::after {
    border-bottom: 1px dashed #fff;
}

#main-footer {
    padding-left: var(--padding-overall);
    padding-right: var(--padding-overall);
}

.table-clCY.table tr th {
    background-color: var(--color-04);
    border-bottom: solid 1px #fff;
    text-align: center;
}

.table-clCY.table td {
    background-color: var(--color-01);
    border-bottom: solid 1px #fff;
}


[class*="hint"] {
    background: #e9f3f9;
}
.thint:not(.noimage)::before {
    background-color: #65abd6;
}

[class*="attention"] {
    background: #faf9e8;
}
.attention:not(.noimage)::before {
    background-color: #d6b065;
}

.link-button{
    /*線の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    color: #333;
    padding: 8px 40px;
    background:#eee;
    text-decoration: none;
    outline: none;
    /*アニメーションの指定*/
    transition: all .3s;
    transition-delay: .7s;/*0.7秒遅れてアニメーション*/
}

/*hoverした際の、ボタンの背景とテキスト色の変更*/
.link-button:hover{
    background:#333;
    color: #fff;
}

/*線の設定*/
.link-button span{
    display: block;
}

/*横線の設定*/
.link-button::before,
.link-button::after{
    content:"";
    /*絶対配置で線の位置を決める*/   
    position: absolute;
    /*線の形状*/   
    width: 0;
    height: 1px;
    background: var(--color-02);
    /*アニメーションの指定*/
    transition: all 0.2s linear;
}

/*縦線の設定*/
.link-button span::before,
.link-button span::after{
    content:"";
    /*絶対配置で線の位置を決める*/   
    position: absolute;
    /*線の形状*/
    width:1px;
    height:0;
    background: var(--color-02);
    /*アニメーションの指定*/
    transition: all 0.2s linear;
}

/*hoverした際、線が縦横100%伸びる*/
.link-button:hover::before,
.link-button:hover::after{
    width: 100%;
}
.link-button:hover span::before,
.link-button:hover span::after{
    height: 100%;
}


/*左下から右下へ伸びる横線*/
.button-anime::after{
    left: 0;
    bottom: 0;
}

/*右下から上へ伸びる縦線*/
.button-anime span::after{
    right: 0;
    bottom: 0;
    transition-delay: 0.2s;
}

/*右上から左上へ伸びる横線*/
.button-anime::before{
    right: 0;
    top: 0;
    transition-delay: 0.4s;
}

/*左上から左下へ伸びる横線*/
.button-anime span::before{
    left: 0;
    top: 0;
    transition-delay: 0.6s;
}


.bg-wrap {
    background: #effaf9;
    width: auto;
    position: relative;
    padding: 2em var(--padding-overall);
    margin: auto calc(0vw - var(--padding-overall));
}

.bg-wrap .mky_gray {
    background: linear-gradient(transparent 70%, #ffffff 70%);
}

.bg-wrap > .cbox-formal04 {
    background: #ffffff;
}

.bg-wrap > .graybg,
.bg-wrap > [class*="attention"]  {
    background-color: #fff;
}

.bg-wrap .link-button:hover {
    background: #fff;
    color: #333;
}

.bg-wrap .link-button {
    position: relative;
    display: inline-block;
    color: var(--color-01);
    padding: 8px 40px;
    background: #333;
    text-decoration: none;
    outline: none;
    transition: all .3s;
    transition-delay: .7s;
}

.bg-wrap .cbox-body .link-button {
    color: #333;
    background: var(--color-01);
}

.bg-wrap .cbox-body .link-button:hover {
    color: var(--color-03);
    background: #fff;
}

@media (min-width: 1025px) {
    [data-column="col2"] #contents .inner {
        gap: 0;
    }
    .menubox {
        background: #fff;
    }
    [data-column="col2"] #menu {
        width: var(--width-rmenu);
    }
    
.menubox > .title {
    padding: 0;
    padding-right: 1em;
    border-bottom: 1px dashed var(--color-03);
    border-left: solid 10px var(--color-03);
    color: var(--color-06);
    text-align: right;
    font-size: 1.25em;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.menubox .sitemenu > li {
    border-left: solid 10px var(--color-03);
    min-height: 60px;
}

.menubox .sitemenu a {
    justify-content: flex-end;
    padding-right: 1.5em;
}

#header-menu #sitemaps {
    display: none;
}

#contents {
    padding-bottom: 2em;
}

[data-column*="col2"][data-menu="left"] #contents.sitemap-wrap {
        padding-bottom: 10vh;
        width: var(--width-entry);
    }
}

@media (max-width: 1024px) {
#header::before {
    background-color: var(--color-01);
}

#header-menu #sitemaps {
    display: block;
}

.menulist {
    display: flex;
    justify-content: center;
}

.menubox .sitemenu a::after {
    display: none;
}

#menu {
    display: none;
}

#spmenu {
    align-items: center;
    color: #333;
}
}

@media (max-width: 768px) {
h1 {
    font-size: 1.4rem;
    margin: 1rem 0;
}
section#text1-section {
    padding-bottom: 4vh;
}
}