:root {
    --main-point-color: #FFBC37;
    --main-text-color: #666666;
    --main-text-hover: #aeaeae;
    --main-bg-color: #fff6e3;
    --main-ligth-color: #FFDF9F;
    
    --focus-square-color: #aa3737;
    --focus-text-color: #570404;
    --link-text-color:#b35600;
    --hover-text-color:#4f3217;
    --tooltip-text-color:white; /* bg = --main-text-color */

    --dark-bg1-color: #FFEDC9;
    --dark-bg2-color: #9e8f67;

    --normal-border-color: #e8dbba;

    /* --top-parallelogram1-color: #fff6e3; */ /* --main-bg-color */
    /* --top-parallelogram2-color: #FFDF9F; */ /* --main-ligth-color */
    --top-parallelogram2-bocshdow: #ffedc9c4;
}

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@500&family=M+PLUS+Rounded+1c&family=Noto+Sans+JP&family=Sawarabi+Gothic&display=swap');
body{
    background:var(--main-bg-color);
    color:var(--main-text-color);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-size: 18px;
	font-family: 'M PLUS 1p', sans-serif;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-family: 'Noto Sans JP', sans-serif;
	font-family: 'Sawarabi Gothic', sans-serif;
    overflow-x: hidden;
}
html {
    position: relative;
    min-height: 100%;
}
a{
	color:var(--link-text-color);
}
a:hover{
	color:var(--hover-text-color);
}
img {
    image-rendering: -webkit-optimize-contrast; /* IE */
	-webkit-backface-visibility: hidden; /* Safari */
  	backface-visibility: hidden;
}



/* font size */
.font-size-ss{
	font-size: 0.7em;
}
.font-size-s{
	font-size: 0.9em;
}
.font-size-m{
	font-size: 1em;
}
.font-size-l{
	font-size: 1.5em;
}
.font-size-xl{
	font-size: 2.0em;
}
@media screen and (max-width: 575.9px) {
    .font-size-xl{
        font-size: calc(14px + 4vw);
    }
}

.font-size-vw-s{
	font-size: calc(13px + 0.3vw);
}
.font-size-vw-s p,
.font-size-vw-m{
	font-size: calc(14px + 0.3vw);
}
.font-size-vw-l{
	font-size: calc(14px + 1vw);
}
.font-size-vw-s h2{
	font-size: calc(18px + 0.6vw);
}



/* text-color */
.pretend-text {
	color: var(--main-text-color);
}
.pretend-text a {
	color: var(--main-text-color);
}
.pretend-text a:hover,
.order.hovered {
	color: var(--main-text-hover);
}
.pretend-text-white {
	color: #ffffff;
}
.pretend-text-white a {
	color: #ffffff;
}
.pretend-text-white a:hover {
	color: var(--dark-bg1-color);
}

.color-text-text{
    color:var(--main-text-color);
}
.color-main-text{
    color:var(--main-point-color);
}
.color-main-text-light{
    color:var(--main-ligth-color);
}
.color-focus-text{
    color:var(--focus-text-color);
}
.color-dark2-text{
    color:var(--dark-bg2-color);
}
.color-error-label {
    color: red;
}
.color-placeholder-text::placeholder
{
	color: #CCCCCC;
}
.color-placeholder-text:-ms-input-placeholder
{
	color: #CCCCCC; /* IE */
}
.color-placeholder-text::-ms-input-placeholder
{
	color: #CCCCCC; /* Edge */
}




/* color */
.color-main-bg{
    background:var(--main-point-color);
}
.color-ligth-bg{
    background:var(--main-ligth-color);
}
.color-dark1-bg{
	background:var(--dark-bg1-color);
}
.color-dark2-bg{
    background:var(--dark-bg2-color);
}

.color-main-header{
    background:var(--main-bg-color);
    /* border-top: 1px solid var(--dark-bg1-color); */
    border-bottom: 1px solid Black;
}

.color-normal-border{
    border: 1px solid var(--normal-border-color);
}
.color-normal-border-top{
    border-top: 1px solid var(--normal-border-color);
}
.color-normal-border-bottom{
    border-bottom: 1px solid var(--normal-border-color);
}
.color-lifgt-border-bottom{
    border-bottom: 1px solid var(--main-ligth-color);
}

.color-focus-square{
	width:5px;
	height:5px;
	background:var(--focus-square-color);
	display: inline-block;
}
.color-text-square{
	width:5px;
	height:5px;
	background:var(--main-text-color);
	display: inline-block;
}
.color-link-square{
	width:5px;
	height:5px;
	background:var(--hover-text-color);
	display: inline-block;
}



/* top */
.index-main-bg {
    background-image: url(../images/index-bg.JPG);
	background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    position: relative;
}
.index-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--main-bg-color);
    content: '';
    opacity: 0.25;
    z-index: -1;
}

.parallelogram-1 .parallelogram-2 {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: -1;
    bottom: 0;
    padding: 25px 40% 25px 20px;
}

.parallelogram-1:before,
.parallelogram-1:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    background-color: var(--main-bg-color);
    opacity: 0.6;
    z-index: -2;
    -webkit-transition: all 0.45s ease;
    transition: all 0.45s ease;
}
.parallelogram-1:before {
    -webkit-transform: skew(30deg) translateX(50%);
    transform: skew(30deg) translateX(50%);
}
.parallelogram-1:after {
    -webkit-transform: skew(-30deg) translateX(60%);
    transform: skew(-30deg) translateX(60%);
}

.parallelogram-2:before,
.parallelogram-2:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--main-ligth-color);
    box-shadow: 0 0 20px var(--top-parallelogram2-bocshdow);
    content: '';
    opacity: 0.4;
    z-index: -3;
}
.parallelogram-2:before {
    -webkit-transform: skew(30deg) translateX(70%);
    transform: skew(30deg) translateX(70%);
}
.parallelogram-2:after {
    -webkit-transform: skew(-30deg) translateX(80%);
    transform: skew(-30deg) translateX(80%);
}

.align-x {
    text-align: right;
}
.align-e {
    justify-content: flex-end;
}
.align-m {
    margin-left: auto;
}
.y-center {
    top: 50%;
    transform: translateY(-50%);
}
@media (min-width: 1200px) { 
    .parallelogram-1:before {
        -webkit-transform: skew(30deg) translateX(-60%);
        transform: skew(30deg) translateX(-60%);
    }
    .parallelogram-1:after {
        -webkit-transform: skew(-30deg) translateX(-60%);
        transform: skew(-30deg) translateX(-60%);
    }
    
    .parallelogram-2:before {
        -webkit-transform: skew(30deg) translateX(-80%);
        transform: skew(30deg) translateX(-80%);
    }
    .parallelogram-2:after {
        -webkit-transform: skew(-30deg) translateX(-70%);
        transform: skew(-30deg) translateX(-70%);
    }

    .align-x {
        text-align: left;
    }
    .align-e {
        justify-content: flex-start;
    }
    .align-m {
        margin-left: 0;
    }
}


/* tooltip */
.tooltip-inner {
    background-color: var(--main-text-color);
    color: var(--tooltip-text-color);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    max-width: 300px;
}
@media (max-height: 355px) {
    .tooltip-inner {
        max-width: 500px;
    }
}


/* button */
/* top ? btn */
button.btn-outline-none, button.btn-outline-none:hover {
    border: 0;
}
/* fillの色を調整 */
/* var(--main-point-color)に合わせて手で修正 */
button.btn-top-info, button.btn-top-info:focus {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="216pt" height="216pt" viewBox="0 0 216 216"><path fill="%23FFBC37" d="M 108.003906 0 C 48.378906 0 0.00390625 48.3125 0.00390625 107.941406 C 0.00390625 167.632812 48.378906 216 108.003906 216 C 167.664062 216 215.996094 167.628906 215.996094 107.941406 C 215.996094 48.3125 167.664062 0 108.003906 0 Z M 115.699219 168.039062 C 113.191406 170.269531 110.285156 171.390625 106.992188 171.390625 C 103.585938 171.390625 100.613281 170.289062 98.074219 168.082031 C 95.535156 165.878906 94.261719 162.792969 94.261719 158.828125 C 94.261719 155.3125 95.492188 152.351562 97.949219 149.953125 C 100.40625 147.554688 103.417969 146.355469 106.992188 146.355469 C 110.507812 146.355469 113.46875 147.554688 115.871094 149.953125 C 118.269531 152.351562 119.472656 155.3125 119.472656 158.828125 C 119.46875 162.734375 118.210938 165.804688 115.699219 168.039062 Z M 146.976562 90.496094 C 145.050781 94.070312 142.761719 97.152344 140.105469 99.75 C 137.460938 102.347656 132.699219 106.714844 125.828125 112.855469 C 123.933594 114.585938 122.410156 116.105469 121.265625 117.414062 C 120.125 118.730469 119.269531 119.929688 118.710938 121.019531 C 118.152344 122.109375 117.722656 123.199219 117.414062 124.285156 C 117.109375 125.371094 116.652344 127.289062 116.03125 130.023438 C 114.972656 135.828125 111.652344 138.730469 106.070312 138.730469 C 103.164062 138.730469 100.726562 137.785156 98.738281 135.886719 C 96.757812 133.988281 95.769531 131.167969 95.769531 127.429688 C 95.769531 122.742188 96.496094 118.679688 97.949219 115.246094 C 99.394531 111.808594 101.324219 108.796875 103.722656 106.199219 C 106.125 103.601562 109.363281 100.519531 113.441406 96.945312 C 117.011719 93.820312 119.59375 91.460938 121.183594 89.871094 C 122.777344 88.277344 124.117188 86.503906 125.203125 84.554688 C 126.296875 82.597656 126.832031 80.480469 126.832031 78.191406 C 126.832031 73.722656 125.175781 69.957031 121.851562 66.886719 C 118.53125 63.820312 114.246094 62.28125 108.996094 62.28125 C 102.851562 62.28125 98.332031 63.832031 95.429688 66.929688 C 92.527344 70.027344 90.074219 74.589844 88.0625 80.617188 C 86.160156 86.925781 82.558594 90.082031 77.257812 90.082031 C 74.132812 90.082031 71.496094 88.980469 69.34375 86.777344 C 67.195312 84.574219 66.125 82.1875 66.125 79.617188 C 66.125 74.316406 67.828125 68.941406 71.230469 63.496094 C 74.636719 58.054688 79.605469 53.542969 86.140625 49.972656 C 92.667969 46.402344 100.292969 44.613281 108.996094 44.613281 C 117.089844 44.613281 124.234375 46.109375 130.429688 49.097656 C 136.625 52.078125 141.414062 56.140625 144.792969 61.28125 C 148.167969 66.414062 149.859375 71.996094 149.859375 78.027344 C 149.867188 82.765625 148.90625 86.921875 146.976562 90.496094 Z M 146.976562 90.496094" /></svg>');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 80% auto;
    height: 20px;
}
/* deails i btn */
button.btn-outline-main, button.btn-outline-main:hover {
    background: transparent;
    color: var(--main-point-color);
    border: solid 1px var(--main-point-color);
}
/* fillの色を調整 */
/* var(--main-point-color)に合わせて手で修正 */
button.btn-img-info, button.btn-img-info:focus, button.btn-img-info:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="x,y"><path fill="%23FFBC37" d="M25,2C12.297,2,2,12.297,2,25s10.297,23,23,23s23-10.297,23-23S37.703,2,25,2z M25,11c1.657,0,3,1.343,3,3s-1.343,3-3,3 s-3-1.343-3-3S23.343,11,25,11z M29,38h-2h-4h-2v-2h2V23h-2v-2h2h4v2v13h2V38z" /></svg>');
	background-position: left 0.3em center;
	background-repeat: no-repeat;
	background-size: 20% auto;
    padding-left: 1.7em;
}
.fill-svg {
    fill: var(--main-point-color);
}


/* details image button */
.slick-prev:before { /* sample-image-list arrow */
	color: var(--main-point-color) !important;
}
.slick-next:before {
	color: var(--main-point-color) !important;
}
.carousel-control-prev-cus,
.carousel-control-next-cus {
    width: 20px;
    height: 20px;
    background: no-repeat 50% / 100% 100%;
    border-radius: 50%;
}
/* fillの色を調整 */
/* var(--main-point-color)に合わせて手で修正 */
.carousel-control-prev-cus {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFBC37' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-cus
{
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFBC37' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}


/* details nav text color border */
a.nav-link {
    font-weight: bold;
    font-size: 1rem;
    color: Black !important;

}
a.nav-link:hover {
    color: #bebebe !important;

}
a.nav-link.active {
    color: #929191 !important;
}
li.nav-item { 
    /* border-right: 1px solid rgba(255, 255, 255, 0.5); */
    margin-left: 0.5cm;
    margin-right: 0.5cm;
} 
/* li.nav-item:first-child { 
    border-left: 1px solid rgba(255, 255, 255, 0.5);
}  */
@media screen and (max-width: 575.9px) {
    a.nav-link::before {
        content: "　▶ ";
      }
    li.nav-item {
        border-left: none;
        border-right: none;
        /* border-bottom: 1px solid rgba(255, 255, 255, 0.5); */
        margin-top: 1px;
        margin-bottom: 1px;
        
    }
    li.nav-item:first-child {
        border-left: none;
        border-right: none;
        /* border-top: 1px solid rgba(255, 255, 255, 0.5); */
    }
}


/* etc */
.point-sentence{
	position: relative;
	padding: 12px 0 2px 24px;
}
.point-sentence:before, .point-sentence:after {
	content: "";
	position: absolute;
	background: var(--main-point-color);
}
.point-sentence:before {
	top: 0;
	left: 12px;
	width: 12px;
	height: 12px;
	transform: rotate(50deg);
}
.point-sentence:after {
	top: 18px;
	left: 4px;
	width: 8px;
	height: 8px;
	transform: rotate(20deg);
}
.first-big:first-letter {
	font-size: 1.5em;
}