@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;700&family=Noto+Sans+JP:wght@400;700&display=swap');
  
/********************
更新日時　20240603 15:30頃
********************/

/********** color **********/

:root{
    --color1: #1A1B1E;
    --color2: #f7f5f4;
    --color3: #555A66;
    --color4: #acacac;
    --base: #F5F5F5;
    --gray: #ccc;
	--white: #ffffff;

	--sysColor1: #FD5F00;
	--sysColor2: #0FD679;
	--sysColor3: #FB4476;
	--sysColor4: #FBC42F;
}

/********** hamburger menu **********/

.button_container{
position: absolute;
	top:50%;
	right: 5%;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
	height: 40px;
	width: 35px;
	padding: 10px;
	cursor: pointer;
	z-index: 12;
	-webkit-transition: opacity .25s ease;
	transition: opacity .25s ease;
}
.button_container:hover {
	opacity: .7;
}
.button_container.active .top {
	-webkit-transform: translateY(10px) translateX(-20px) rotate(45deg);
			transform: translateY(10px) translateX(-20px) rotate(45deg);
	background: rgba(255,255,255,0.90);
}
.button_container.active .middle {
	opacity: 0;
	background: rgba(255,255,255,0.90);
}
.button_container.active .bottom {
	-webkit-transform: translateY(-10px) translateX(-20px) rotate(-45deg);
			transform: translateY(-10px) translateX(-20px) rotate(-45deg);
	background: rgba(255,255,255,0.90);
}
.button_container span {
	background: rgba(255,255,255,1);
	border: none;
	height: 1.5px;
	width: 35px;
	position: absolute;
	top: 10px;
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	-webkit-transition: all 0.35s ease;
	transition: all 0.35s ease;
	cursor: pointer;
}
.button_container span:nth-of-type(1){
	height: auto;
	width: 40px;
	background-color: transparent;
	top: 40px;
	left: 29px;
}
.button_container.active span:nth-of-type(1){color: rgba(255,255,255,0.80);}
.button_container span:nth-of-type(3) {
	top: 20px;
	text-align: right;
}
.button_container span:nth-of-type(4) {
	top: 30px;
}
/* ハンバーガメニュー開いた時 */
.button_container.active.transform{
	background-color: transparent!important;
}

.overlay{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	height: 0%;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity .35s, visibility .35s, height .35s;
	transition: opacity .35s, visibility .35s, height .35s;
	z-index: 20;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
.overlay::-webkit-scrollbar{height: 10px; width: 1px;}
.overlay::-webkit-scrollbar-track{background-color: #E2DED6;}
.overlay::-webkit-scrollbar-thumb{background-color: #3c2d2d;}
.overlay.open {
	opacity: 1;
	visibility: visible;
	height: 100vh;
	z-index: 11;
}
.overlay.open .overlay-menu{opacity: 0;}
.overlay.open .overlay-menu{
	-webkit-animation: fadeIn .5s ease forwards;
			animation: fadeIn .5s ease forwards;
	-webkit-animation-delay: .35s;
			animation-delay: .35s;
}

.overlay .overlay-menu{
	position: relative;
	height: 100%;
	top: 10%;
}
.overlay ul {
	list-style: none;
	position: relative;
}
.overlay ul li {
	position: relative;
	width: 48%;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.overlay ul li a {
	position: relative;
	text-decoration: none;
	overflow: hidden;
}
.overlay ul li a:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0%;
	-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
	height: 1px;
	background: #FFF;
	-webkit-transition: .35s;
	transition: .35s;
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeIn{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@media screen and (max-width: 768px){
}
@media screen and (max-width: 667px){
	.overlay .overlay-menu{
		top: 0;
	}
	.overlay ul li{width: 100%;}
}
/********** three dots menu **********/

.dot_menu {
	position: relative;
	display: block;
	width: 37px;
	height: 37px;
	box-sizing: border-box;
	cursor: pointer;
	padding: 0.25rem;
	clear: both;
}

.dot_menu div {
  background: #000;
  width: 100%;
  height: 3px;
  margin: 5px auto;
  border-radius: 10px;
  transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
  transition-timing-function: cubic-bezier(0.28, 0.55, 0.385, 1.65);
  transform: 0;
  transform-origin: center;
}

.dot_menu div:before,
.dot_menu div:after {
  transition: 0.3s cubic-bezier(0.28, 0.55, 0.385, 1.65);
  transition-timing-function: cubic-bezier(0.28, 0.55, 0.385, 1.65);
}

.dot_menu--type-4 .dot_menu div {
  width: 3px;
  margin-right: auto;
  margin-left: auto;
}

.dot_menu.dot_menu--toggled div {
  width: 100%;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.28, 0.55, 0.385, 1.65);
}

.dot_menu.dot_menu--toggled div:after,
.dot_menu.dot_menu--toggled div:before {
  width: 100%;
}

.dot_menu.dot_menu--toggled div:first-child {
  transform: translateY(8px) rotate(45deg);
}

.dot_menu.dot_menu--toggled div:not(:first-child):not(:last-child) {
  opacity: 0;
}

.dot_menu.dot_menu--toggled div:last-child {
  transform: translateY(-8px) rotate(-45deg);
}

.mobile_menu_bar {
  padding-bottom: 0;
  margin-bottom: 26px;
}

.mobile_menu_bar:before {
  display: none;
}

/********** on-off button **********/
.switch-ui {
	position: relative;
	width: 120px;
	height: 50px;
	display: inline-block;
	vertical-align: middle;
}
.switch-ui.animate .switch-ui-inner {
	-webkit-transition: margin-left 0.2s ease-in-out;
	-moz-transition: margin-left 0.2s ease-in-out;
	transition: margin-left 0.2s ease-in-out;
	-webkit-transition-property: margin-left, background-color, color;
	-moz-transition-property: margin-left, background-color, color;
	transition-property: margin-left, background-color, color;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
.switch-ui.animate .switch-ui-switch {
	-webkit-transition: left 0.2s ease-in-out;
	-moz-transition: left 0.2s ease-in-out;
	transition: left 0.2s ease-in-out;
}
.switch-ui .switch-ui-checkbox {
	display: none;
}
.switch-ui .switch-ui-checkbox:disabled + .switch-ui-label {
	opacity: 0.6;
}
.switch-ui .switch-ui-checkbox:checked + .switch-ui-label .switch-ui-inner {
	margin-left: 0;
	background-color: #0FD679;
	color: #fefefe;
}
.switch-ui .switch-ui-checkbox:checked + .switch-ui-label .switch-ui-switch {left: 60%;}
.switch-ui .switch-ui-label {
	display: block;
	overflow: hidden;
	border-radius: 50px;
	height: 50px;
}
.switch-ui .switch-ui-label .switch-ui-inner {
	width: 200%;
	height: 100%;
	margin-left: -100%;
	background-color: #eee;
	color: #999999;
}
.switch-ui .switch-ui-label .switch-ui-inner:before, .switch-ui .switch-ui-label .switch-ui-inner:after {
	position: absolute;
	top:50%;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
	height: 50px;
	line-height: 50px;
	padding: 0;
	font-size: 16px;
}
.switch-ui .switch-ui-label .switch-ui-inner:before {left: 10px;}
.switch-ui .switch-ui-label .switch-ui-inner:after {right: 10px;}

.switch-ui .switch-ui-label.for-checkbox-1 .switch-ui-inner:before {content: "表示";}
.switch-ui .switch-ui-label.for-checkbox-1 .switch-ui-inner:after {content: "非表示";}
.switch-ui .switch-ui-label.for-checkbox-2 .switch-ui-inner:before {content: "公開";}
.switch-ui .switch-ui-label.for-checkbox-2 .switch-ui-inner:after {content: "非公開";}

.switch-ui .switch-ui-label .switch-ui-switch {
	position: absolute;
	width: 44px;
	height: 44px;
	background: #fefefe;
	border-radius: 35px;
	top: 3px;
	left: 3px;
}

/********** svg **********/

.s_icon{
	fill: none;
	fill-rule: evenodd;
	stroke: currentColor;
	stroke-width: 1px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.stroke_2{
	stroke-width: 2px;
}
.stroke_3{
	stroke-width: 3px;
}
path[d="m0,0h100v100H0V0Z"]{
	fill: none;
	stroke: none;
	stroke-width: 0;
}
#s_icon39 circle,#s_icon39 circle,#s_icon42 circle{fill: currentColor;}


/********** form **********/

input, select, textarea, button{
	width: 100%;
	display: block;
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	box-sizing: border-box;
	font: inherit;
	font-weight: normal;
	background: transparent;
	outline: none;
}

/* text */

input[type="text"]:not(.custom), input[type="number"]:not(.custom), input[type="password"], textarea{
	color: currentColor;
	border-radius: 5px;
	background-color: var(--color2);
/*	min-height: calc(1.7em + 20px);*/
	transition: border-color 0.2s!important;
}
input[type="text"].border_so2:focus, input[type="password"].border_so2:focus, input[type="number"].border_so2:focus, textarea.border_so2:focus{
	background-color: transparent;
	border-color: var(--sysColor1);
}
input::placeholder, textarea::placeholder{
	opacity: 0.5;
}
textarea{
	overflow: auto;
	resize: vertical
}

/* select */

.select_label:not(.custom)::before, .select_label:not(.custom)::after{
	position: absolute;
	content: "";
	margin: auto;
	pointer-events: none;
}
.select_label:not(.custom)::before{
	width: 30px;
	height: 30px;
	border-radius: 3px;
	background-color: var(--color4);
	top: 0;
	bottom: 0;
	right: 9px;
}
.select_label:not(.custom)::after{
	width: 8px;
	height: 8px;
	border-right: solid 2px gray;
	border-bottom: solid 2px gray;
	transform: rotate(45deg);
	top: 0;
	bottom: 4px;
	right: 40px;
}
select optgroup option:checked{
	background-image: linear-gradient(to bottom, var(--sysColor1), var(--sysColor1));
	color: #fff;
}

select:not(.custom):invalid, select:not(.custom) option:first-child{
	color: var(--gray);
}
optgroup{
	font-weight: bold;
}

/* button */

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="submit"].border_so2:focus,
input[type="button"].border_so2:focus {
	outline-offset: -2px;
}

/* radio checkbox */

.radio_wrap label::before, .radio_wrap label::after, .check_wrap label::before, .check_wrap label::after {
	content: "";
	display: block; 
	position: absolute;
}
.radio_wrap label::before, .radio_wrap label::after, .check_wrap label::before{
	transform: translateY(-50%);
	top: 50%;
}

.radio_wrap label::before{
	border-radius: 50%;
	background-color: var(--color2);
	border: 1px solid var(--color2);
	width: 20px;
	height: 20px;
	left: 0;
	transition: 0.2s;
}
.check_wrap label::before {
	background-color: var(--color2);
	width: 20px;
	height: 20px;
	left: 0;
	transition: 0.2s;
	border-radius: 2px;
}

.radio_wrap label::after {
	border-radius: 50%;
	background-color: var(--sysColor1);
	opacity: 0;
    width: 14px;
    height: 14px;
    left: 4px;
	transition: 0.2s;
}
.check_wrap label::after{
    opacity: 0;
    width: 10px;
    height: 5px;
    left: 4px;
    transition: 0.2s;
}
.check_wrap label::after {
    border-left: solid 2px #fff;
    border-bottom: solid 2px #fff;
    top: 6px;
    transform: translateY(-50%) rotate(-45deg);
}
.check_wrap.custom label::after {
    top: calc(50% - 2px);
}
.check_wrap:not(.custom) label.pd_l-30px::before{
	left: 0;
}
.check_wrap:not(.custom) label.pd_l-30px::after{
    top: calc(50% - 2px);
    left: 4px;
}

.radio_wrap input:checked + label, .check_wrap.custom input:checked + label{
	color: var(--sysColor1);
}
.check_wrap:not(.custom) input:checked + label::before{
	background-color: var(--sysColor1);

}
.check_wrap.result_wrap:not(.custom) input:checked + label, #scenario_list_add.check_wrap:not(.custom) input:checked + label, #added_scenario_list .check_wrap:not(.custom) input:checked + label, #tag_list_add .check_wrap:not(.custom) input:checked + label, #added_list .check_wrap:not(.custom) input:checked + label{
	background-color: var(--sysColor1);
}
.radio_wrap input:checked + label::before{
	background-color: transparent;
	border-color: var(--sysColor1);
}

.check_wrap.custom input:checked + label::before{
	background-color: var(--sysColor1);
}
.radio_wrap input:checked + label::after, .check_wrap input:checked + label::after {
	opacity: 1;
}

.radio_wrap .visually-hidden, .check_wrap .visually-hidden {
	position: absolute;
	white-space: nowrap;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
}

/* use_check */

.use_check label::before, .use_check label::after{
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	margin: auto;
	transition: 0.2s;
	border-radius: 50px;
}
.use_check label::before{
	width: 30px;
	height: 10px;
	background-color: var(--color3);
	right: 5px;
	opacity: 0.3;
}
.use_check label::after{
	width: 20px;
	height: 20px;
	background-color: var(--color3);
	right: 20px;
}
.use_check input:checked + label{
	color: var(--sysColor1);
}
.use_check input:checked + label::before{
	background-color: var(--sysColor1);
}
.use_check input:checked + label::after{
	background-color: var(--sysColor1);
	right: 0;
}


/********** custom **********/
.font_60{font-size: 60px;}
.font_70{font-size: 70px;}
.font_80{font-size: 80px;}
.font_90{font-size: 90px;}

.motion02s{transition: 0.2s;}

.pd_15px{padding: 15px;}
.pd_100px{padding: 100px;}
.pd_l-60px{padding-left: 60px;}
.pd_l-70px{padding-left: 70px;}
.pd_l-80px{padding-left: 80px;}
.pd_l-90px{padding-left: 90px;}
.pd_l-120px{padding-left: 120px;}
.pd_l-130px{padding-left: 130px;}
.pd_r-55px{padding-right: 55px;}

.mg_right{margin-left: auto;margin-right: 0;}


.mg_t-70px{margin-top: 70px;}
.mg_b-70px{margin-bottom: 70px;}
.mg_b-80px{margin-bottom: 80px;}
.mg_l-130px{margin-left: 130px;}
.mg_l--15px{margin-left: -15px;}

.width_15{width: 15px;}
.width_25{width: 25px;}
.width_35{width: 35px;}
.width_45{width: 45px;}
.width_60{width: 60px;}
.width_65{width: 65px;}
.width_70{width: 70px;}
.width_80{width: 80px;}
.width_85{width: 85px;}
.width_90{width: 90px;}
.width_95{width: 95px;}
.width_120{width: 120px;}
.width_130{width: 130px;}
.width_160{width: 160px;}
.width_170{width: 170px;}
.width_180{width: 180px;}
.width_250{width: 250px;}
.width_270{width: 270px;}
.width_350{width: 350px;}
.width_550{width: 550px;}
.width_700{width: 700px;}
.width_750{width: 750px;}
.n_width_900{width: calc(100% - 900px);}
.n_width_800{width: calc(100% - 800px);}
.n_width_750{width: calc(100% - 750px);}
.n_width_700{width: calc(100% - 700px);}
.n_width_650{width: calc(100% - 650px);}
.n_width_600{width: calc(100% - 600px);}
.n_width_550{width: calc(100% - 550px);}
.n_width_500{width: calc(100% - 500px);}
.n_width_400{width: calc(100% - 400px);}
.n_width_350{width: calc(100% - 350px);}
.n_width_300{width: calc(100% - 300px);}
.n_width_250{width: calc(100% - 250px);}
.n_width_200{width: calc(100% - 200px);}
.n_width_170{width: calc(100% - 170px);}
.n_width_150{width: calc(100% - 150px);}
.n_width_120{width: calc(100% - 120px);}
.n_width_100{width: calc(100% - 100px);}
.n_width_90{width: calc(100% - 90px);}
.n_width_80{width: calc(100% - 80px);}
.n_width_70{width: calc(100% - 70px);}
.n_width_65{width: calc(100% - 65px);}
.n_width_60{width: calc(100% - 60px);}
.n_width_50{width: calc(100% - 50px);}
.n_width_40{width: calc(100% - 40px);}
.n_width_30{width: calc(100% - 30px);}
.n_width_25{width: calc(100% - 25px);}
.n_width_20{width: calc(100% - 20px);}
.n_width_15{width: calc(100% - 15px);}
.n_width_10{width: calc(100% - 10px);}
.n_width_5{width: calc(100% - 5px);}
.n_width_200-max{max-width: calc(100% - 200px);}
.width_100per-max{max-width: 100%;}
.width_95per-max{max-width: 95%;}
.width_90per-max{max-width: 90%;}
.width_80per-max{max-width: 80%;}

.width_15, .width_25, .width_30, .width_35, .width_45, .width_60, .width_65, .width_70, .width_80, .width_85, .width_90, .width_95, .width_120, .width_130, .width_160, .width_170, .width_180, .width_250, .width_270, .width_350, .width_550, .width_750, .n_width_900, .n_width_800, .n_width_750, .n_width_700, .n_width_650, .n_width_600, .n_width_550,  .n_width_500, .n_width_400, .n_width_350, .n_width_300, .n_width_250, .n_width_200, .n_width_170, .n_width_150, .n_width_120, .n_width_100, .n_width_90, .n_width_80, .n_width_70, .n_width_65, .n_width_60, .n_width_50, .n_width_40, .n_width_30, .n_width_25, .n_width_20, .n_width_15, .n_width_10, .n_width_5,.n_width_200-max, .width_80per-max, .width_90per-max, .width_95per-max, .width_100per-max{
	box-sizing: border-box;
}


.height_10{height: 10px;}
.height_15{height: 15px;}
.height_30{height: 30px;}
.height_50{height: 50px;}
.height_100{height: 100px;}
.height_150{height: 150px;}
.height_200{height: 200px;}
.height_250{height: 250px;}
.height_300{height: 300px;}
.height_400{height: 400px;}
.height_500{height: 500px;}
.height_600{height: 600px;}

.height_100-max{max-height: 100px;}
.height_200-max{max-height: 200px;}
.height_300-max{max-height: 300px;}
.height_400-max{max-height: 400px;}
.height_500-max{max-height: 500px;}

.height_200-min{min-height: 200px;}

.over_auto{overflow: auto;}
.over_auto-x{overflow-x: auto;}
.over_auto-y{overflow-y: auto;}

.tb_center{
	top: 0;
	bottom: 0;
	margin: auto;
}
.lr_center{
	left: 0;
	right: 0;
	margin: auto;
}

.top_0{top: 0px;}
.top_5{top: 5px;}
.top_10{top: 10px;}
.top_15{top: 15px;}
.top_20{top: 20px;}
.top_25{top: 25px;}
.top_30{top: 30px;}

.bottom_0{bottom: 0px;}
.bottom_5{bottom: 5px;}
.bottom_10{bottom: 10px;}
.bottom_15{bottom: 15px;}
.bottom_20{bottom: 20px;}
.bottom_25{bottom: 25px;}
.bottom_30{bottom: 30px;}

.left_0{left: 0px;}
.left_5{left: 5px;}
.left_10{left: 10px;}
.left_15{left: 15px;}
.left_20{left: 20px;}
.left_25{left: 25px;}
.left_30{left: 30px;}
.left_10per{left: 10%;}

.right_0{right: 0px;}
.right_5{right: 5px;}
.right_10{right: 10px;}
.right_15{right: 15px;}
.right_20{right: 20px;}
.right_25{right: 25px;}
.right_30{right: 30px;}
.right_40{right: 40px;}

.rotate_-90{transform: rotate(-90deg);}
.rotate_-45{transform: rotate(-45deg);}
.rotate_45{transform: rotate(45deg);}
.rotate_90{transform: rotate(90deg);}
.rotate_180{transform: rotate(180deg);}

.border_rad30{border-radius: 30px!important;}
.border_rad50{border-radius: 50px!important;}
.border_rad100{border-radius: 100px!important;}
.pointer_none{pointer-events: none;}
.cursor_p{cursor: pointer;}
.shadow-s{box-shadow: 0 0 10px rgba(0,0,0,0.08);}
.shadow_clear{box-shadow: none;}
.co-gap_5{column-gap: 5px;}
.co-gap_10{column-gap: 10px;}
.co-gap_20{column-gap: 20px;}
.co-gap_50{column-gap: 50px;}
.ro-gap_10{row-gap: 10px;}


/********** all **********/

*:focus {outline:none;}
html{font-size:100%;}
body{
	letter-spacing: 0;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	background-color: var(--base);
}
#wrap{
	position: relative;
	min-height: 100vh;
	transition: opacity 0.2s;
	min-width: 1280px;
}
#copyright{
	z-index: -1;
}

.s_icon{
	pointer-events: none;
}

.delete_active{
	background-color: #faeaee;
}

/* copy */

.copied{
	position: relative;
}
.copied::before{
    position: absolute;
    display: block;
    padding: 5px 0;
    font-size: 12px;
    font-weight: normal;
    border-radius: 5px;
    left: 50%;
    bottom: calc(100% + 5px);
    transform: translateX(-50%);
    background-color: var(--color3);
    color: #fff;
	transition: 0.2s;
}
#questionnaire .copied::before{
    content: "URLをコピーしました";
    width: 140px;
}
#route .copied::before{
    content: "アドレスをコピーしました";
    width: 160px;
}

/* section type */
.sect_type_wrap.d_flex{
	column-gap: 30px;
	row-gap: 30px;
	align-items: stretch
}
.sect_column2, .sect_column3, .sect_column4{
	box-sizing: border-box;
}
.sect_column2{
	width: calc((100% / 2) - (30px / 2));
}
.sect_column3{
	width: calc((100% / 3) - ((30px * 2) / 3));
}
.sect_column4{
	width: calc((100% / 4) - ((30px * 3) / 4));
}

.sect_type1{
	padding: 30px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.08);
}
.sect_type2{
	padding: 5%;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.08);
}
.sect_type3{
	padding: 50px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.08);
}

/* box type */
.box_type_wrap.d_flex{
	column-gap: 10px;
	row-gap: 10px;
	align-items: stretch
}
.box_column2, .box_column3, .box_column4{
	box-sizing: border-box;
}
.box_column2{
	width: calc((100% / 2) - (10px / 2));
}
.box_column3{
	width: calc((100% / 3) - ((10px * 2) / 3));
}
.box_column4{
	width: calc((100% / 4) - ((10px * 3) / 4));
}

/* pop up */
/* ▼ 20240603_correct start ▼ */
.pop .pop_wrap{
	transition: transform 0.2s;
	transform: translateY(-5px);
	top: 10px;
    left: 65%;
	z-index: 3;
}
/* ▲ 20240603_correct end ▲ */
.pop .pop_wrap.active{
	transform: translateY(0);
}

.pop_wrap.width_600 li{
	width: 48%;
	box-sizing: border-box;
}
.pop_wrap.width_600 li:nth-last-of-type(1),
.pop_wrap.width_600 li:nth-last-of-type(2){border-bottom: none;}

#header .pop_wrap{
	top: 100%;
	left: 0;
}
.pop_click_wrap{
	bottom: -130px;
    right: -20px;
	z-index: 1;
}

/* circle before */

.circle_before{
	position: relative;
	padding-left: 60px;
}
.circle_before::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: currentColor;
	top: 0;
	bottom: 0;
	left: 20px;
	margin: auto;
}

/* circle2 before */

.circle2_before{
	position: relative;
	padding-left: 25px;
}
.circle2_before::before{
	position: absolute;
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: currentColor;
	opacity: 0.2;
	top: 0;
	bottom: 0;
	left: 10px;
	margin: auto;
}

/* line before */

.line_before{
	position: relative;
	padding-left: 20px;
}
.line_before::before{
	position: absolute;
	content: "";
	width: 4px;
	border-radius: 4px;
	background-color: currentColor;
	top: 8px;
	bottom: 8px;
	left: 8px;
}

/* line2 before */

.line2_before{
	position: relative;
	padding-left: 20px;
}
.line2_before::before{
	position: absolute;
	content: "";
	width: 2px;
	background-color: currentColor;
	top: 8px;
	bottom: 8px;
	left: 8px;
}

/* cate title */

.title_line{
	position: relative
}
.title_line::before{
	position: absolute;
	content: "";
	width: 5px;
	height: 100%;
	background-color: currentColor;
	top: 0;
	left: -30px;
	border-radius: 0 5px 5px 0;
}

/* modal */

.modal .modal_box{
    z-index: 10;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    pointer-events: none;
    transition: opacity 0.2s;
}
.modal .modal_box.active{
    opacity: 1;
    pointer-events: auto;
}
.modal .modal_box::-webkit-scrollbar{
    display:none;
}
.modal .modal_box .modal_close{
    cursor: pointer;
    top: 10px;
    right: 10px;
}
.tag_list_add_wrap .modal_item, .scenario_list_add_wrap .modal_item{
	height: calc(100% - 100px);
	min-height: 300px;
}

/* result */

.result_wrap .result_box:last-child{
	border-bottom: none;
}

/* over txt */

.over_txt2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.over_txt3 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}
.over_txt4 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

/* border right custom */

.border_r_c{
	position: relative;
}
.border_r_c::before{
	position: absolute;
	content: "";
	width: 1px;
	height: 40px;
	background-color: var(--color4);
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

/* scroll bar */

::-webkit-scrollbar{
	width: 9px;
	height: 9px;
 }
::-webkit-scrollbar-track{
	background-color: transparent;
 }
::-webkit-scrollbar-thumb{
	border-radius: 20px;
	scrollbar-width: thin;
    border: 3px solid transparent;
	background-color: var(--color3);
    background-clip: content-box;
 }
 ::-webkit-scrollbar-thumb:hover{
	background-color: var(--color1);
 }

/* c_select */

.c_select .c_select_thumbnail[color-data="#fff"]{
	color: var(--color1);
	box-shadow: 0 0 1px var(--color3) inset;
}
.c_select .c_select_wrap{
	left: 50%;
	top: calc(100% + 10px);
	transform: translate(-50%, -5px);
	z-index: 1;
	transition: transform 0.2s;
}
.c_select .c_select_wrap.active{
	transform: translate(-50%, 0);
}
.c_select .c_select_box[color-data="#fff"] .c_select_color{
	box-shadow: 0 0 1px var(--color3) inset;
}
.c_select .c_select_box{
	transition-property: background-color;
}

/* tag_add_wrap icon */

.tag_add_wrap .tag_add_title::before{
    position: absolute;
    content: "タグ付けの選択肢は\Aタグ一覧より登録してください";
    display: block;
    padding: 5px 0;
    font-size: 12px;
    font-weight: normal;
    border-radius: 5px;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    background-color: var(--color3);
    color: #fff;
	transition: opacity 0.2s;
	white-space: pre;
    width: 190px;
	z-index: 1;
	text-align: center;
	opacity: 0;
}
.tag_add_wrap .tag_add_title::after{
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-left: solid 5px transparent;
	border-bottom: solid 10px var(--color3);
	border-right: solid 5px transparent;
    left: 50%;
    top: calc(100% + 1px);
    transform: translateX(-50%);
	transition: opacity 0.2s;
	opacity: 0;
}
.tag_add_wrap .tag_add_title:hover::before, .tag_add_wrap .tag_add_title:hover::after{
	opacity: 1;
}


/********** header **********/
header{
	position: relative;
	width: 100%;
	box-sizing: border-box;
}
#header{
	top: 0;
	left: 0;
	z-index: 10;
}
header #logo{width: 170px;}
/* ▼ 20240603_correct start ▼ */
#header #user .pop_item{
	overflow: hidden;
	border-bottom: 1px solid var(--gray);
}
/* ▲ 20240603_correct end ▲ */
#header #user .pop_item .s_icon{
	top: 0;
	bottom: 0;
	right: 10px;
	margin: auto;
	transform: rotate(90deg);
}
#side_nav{
	top: 0;
	left: 15px;
	z-index: 9;
}
#side_nav .focus{
	background-color: var(--color1);
	color: var(--white);
}
#side_nav .hvr_bg_color1{border-radius: 50px;}


#side_nav ul.bg_color1{
	border-radius: 70px;
    padding: 100px 0;
}
#side_nav li.width_80 > a,#side_nav .pop{
	border-radius: 50%;
}
/********** login **********/
#wrap.login{min-width: auto;}
.bg_img{
	background-image: url(../img/bg1.jpg);
    width: 100%;
    top: 0;
    right: 0;
	background-size: cover;
}
#login{
	top:50%;
	left: 8%;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}
#login input[type="submit"]{box-shadow: 0 0 30px rgba(253,95,0,0.7);}
#login input[type="submit"]:hover{box-shadow: 0 0 30px rgba(25,25,25,0.7);}
/********** nolink **********/
#nolink .bg_img{
	background-image: url("../img/nolink.jpg");
    width: 100%;
	background-size: cover;
}
/********** under **********/
#blog_new .switch_box{margin-bottom: -105px;}
#blog_list .tag_wrap > div{margin-right: 5px;margin-bottom: 5px;}
#blog_list .date{
	bottom: -30px;
	right: 30px;
}
#cate_list .pop_click_wrap .flex_center-left,
#sub_cate_list .pop_click_wrap .flex_center-left,
#item_list .pop_click_wrap .flex_center-left{justify-content: center;}
#site_setting .sect_type_wrap.d_flex{align-items: flex-start;}
#seo .cate_box.keyword dd{
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items: center;
	flex-direction: row;
}
#seo .cate_box.keyword input{
	margin-bottom: 0.5%;
	width: 33%;
	box-sizing: border-box;
}
/* ▼ 20240603_correct start ▼ */
#topcms #submit{
	position: fixed;
	bottom:5%;
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	z-index: 2;
}
/* ▲ 20240603_correct end ▲ */
/*---------------------------------------------------------------------------*/
/*1300px resize*/
@media screen and (max-width: 1300px){
	.d_none_re{
		display: none;
	}
	.d_block_re{
		display: block;
	}
	.d_inline_re{
		display: inline;
	}
	.grid_6_re{
		width: 50%!important;
		box-sizing: border-box;
	}
	.grid_12_re{
		width: 100%!important;
		box-sizing: border-box;
	}
	.n_width_100_re{
		width: calc(100% - 100px)!important;
		box-sizing: border-box;
	}
	.width_100_re{
		width: 100px!important;
		box-sizing: border-box;
	}
	.border_rad10_re{
		border-radius: 10px!important;
	}
	.mg_b-10px_re{
		margin-bottom: 10px;
	}
	.pd_clear_re{
		padding: 0;
	}
	.border_clear_re{
		border: none;
	}
	.border_so1-b_re{
		border-bottom: solid 1px
	}
	.border_so1-b_re.border_color4{
		border-color: var(--color4);
	}
	.flex_center-center_re{
		justify-content: center;
		align-items: center;
	}
}
@media screen and (max-width: 768px){
	.width_50_tb{width: 50px;}
	.width_100_tb{width: 100px;}
	.width_120_tb{width: 120px;}
	.width_95per_tb{width: 95%!important;}
	.n_width_40_tb{width: calc(100% - 40px);}
	.n_width_50_tb{width: calc(100% - 50px);}
	.n_width_60_tb{width: calc(100% - 60px);}
	.n_width_110_tb{width: calc(100% - 110px);}
	.n_width_130_tb{width: calc(100% - 130px);}
	.n_width_300_tb{width: calc(100% - 300px);}
	.n_width_350_tb{width: calc(100% - 350px);}
	.n_width_450_tb{width: calc(100% - 450px);}
	.n_width_120-max_tb{max-width: calc(100% - 120px);}
	.width_100per-max_tb{max-width: 100%;}
	.width_50_tb,.width_100_tb,.width_120_tb,.width_95per_tb,.n_width_40_tb,.n_width_50_tb,.n_width_60_tb,.n_width_110_tb,.n_width_130_tb,.n_width_300_tb,.n_width_350_tb,.n_width_450_tb,.n_width_120-max_tb,.width_100per-max_tb{
		box-sizing: border-box;
	}
	
	.mg_clear_tb{margin: 0;}
	.mg_center_tb{margin: 0 auto;}
	.mg_l--5px_tb{margin-left: -5px;}
	
	.lr_center_tb{
		left: 0;
		right: 0;
		margin: auto;
	}
	.tb_clear_tb{
		top: auto;
		bottom: auto;
		margin: auto;
	}
	.top_10_tb{top: 10px;}
	
	.border_rad50_tb{border-radius: 50px!important;}
	.border_clear_tb{border: none;}
	.shadow_clear_tb{box-shadow: none;}
	.co-gap_10_tb{column-gap: 10px;}
	
	#wrap{min-width: auto;}
	#header{
		background-color: var(--color1);
		top: 15px;
		padding-top: 10px;
		padding-bottom: 15px;
	}
	.sect_type2{padding: 10% 5%;}
	.sect_type3{padding: 30px;}
	
	#master_blog_block_new .hide_btn button{
		display: inline-block;
		width: auto;
		padding: 10px;
		padding-bottom: 3px;
		border: 2px solid var(--color1);
		border-radius: 50%;
	}
	#master_blog_block_new .hide_btn svg{
		position: static;
		top: auto;
		left: auto;
		
	}
	#master_blog_block_new .hide_btn span{display: none;}
	/********** under **********/
	#login{
		top:50%;
		left: 50%;
		-ms-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}
	#blog_list #contents .btn_wrap .btn,#blog_list #contents .btn_wrap .btn a,#blog_list #contents .btn_wrap .btn > span,
	#cate_list #contents .btn_wrap .btn,#cate_list #contents .btn_wrap .btn a,#cate_list #contents .btn_wrap .btn > span,
	#sub_cate_list #contents .btn_wrap .btn,#sub_cate_list #contents .btn_wrap .btn a,#sub_cate_list #contents .btn_wrap .btn > span,
	#item_list #contents .btn_wrap .btn,#item_list #contents .btn_wrap .btn a,#item_list #contents .btn_wrap .btn > span{width: 100%;box-sizing: border-box;}

	#blog_list #contents .d_flex.pd_l-30px.pd_r-30px.mg_b-20px,
	#cate_list #contents .d_flex.pd_l-30px.pd_r-30px.mg_b-20px,
	#sub_cate_list #contents .d_flex.pd_l-30px.pd_r-30px.mg_b-10px,
	#item_list #contents .d_flex.pd_l-30px.pd_r-30px.mg_b-10px{display: none;}
	
	#blog_list .con_box > .bg_white,
	#blog_cate_list .con_box.bg_white,
	#cate_list .con_box > .bg_white,
	#sub_cate_list .con_box > .bg_white,
	#item_list .con_box > .bg_white{
		box-shadow: none;
		border: none;
		border-bottom: 1px solid var(--base);
		border-radius: 0!important;
		padding: 0;
		position: relative;
	}

	#blog_list .con_box .width_200,
	#blog_cate_list .con_box .width_200,
	#cate_list .con_box .width_200,
	#sub_cate_list .con_box .width_200,
	#item_list .con_box .width_200{
		width: 150px;
		justify-content: flex-start;
		align-items: center;
	}
	
	#blog_list .con_box .n_width_650,
	#blog_cate_list .con_box .n_width_600,
	#cate_list .con_box .n_width_650,
	#sub_cate_list .con_box .n_width_650,
	#item_list .con_box .n_width_650{
		width: 100%;
		margin-top: 10px;
	}
	
	#blog_list .con_box .width_350,
	#blog_cate_list .con_box .width_350,
	#cate_list .con_box .width_350,
	#sub_cate_list .con_box .width_350,
	#item_list .con_box .width_350{
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	#blog_list .con_box .box_btn,
	#blog_cate_list .con_box .box_btn,
	#cate_list .con_box .box_btn,
	#sub_cate_list .con_box .box_btn,
	#item_list .con_box .box_btn{width: calc(33% - 10px);}
	
	#blog_list .con_box .box_btn input,#blog_list .con_box .box_btn span.txt_color1,
	#blog_cate_list .con_box .box_btn input,#blog_cate_list .con_box .box_btn span.txt_color1,
	#cate_list .con_box .box_btn input,#cate_list .con_box .box_btn span.txt_color1,
	#sub_cate_list .con_box .box_btn input,#sub_cate_list .con_box .box_btn span.txt_color1,
	#item_list .con_box .box_btn input,#item_list .con_box .box_btn span.txt_color1{width: 100%;}
	
	#blog_list .con_box .pop_click,#blog_list .con_box .dot_menu,
	#cate_list .con_box .pop_click,#cate_list .con_box .dot_menu,
	#sub_cate_list .con_box .pop_click,#sub_cate_list .con_box .dot_menu,
	#item_list .con_box .pop_click,#item_list .con_box .dot_menu{
		position: absolute;
		top: 0;
		right: 0;
	}
	#blog_list .con_box .pop_click_wrap,
	#cate_list .con_box .pop_click_wrap,
	#sub_cate_list .con_box .pop_click_wrap,
	#item_list .con_box .pop_click_wrap{
		bottom: -160px;
		right: 0;
	}
	#blog_list .tag_wrap > div{
		padding-left: 15px;
		padding-right: 15px;
	}
	#seo .cate_box.keyword input{
		margin-bottom: 2%;
		width: 49%;
	}
}

@media screen and (max-width: 667px){
	.width_25_sp{width: 25px;}
	.width_50_sp{width: 50px;}
	.width_65_sp{width: 65px;}
	.width_110_sp{width: 110px;}
	.n_width_40_sp{width: calc(100% - 40px);}
	.n_width_50_sp{width: calc(100% - 50px);}
	.n_width_100_sp{width: calc(100% - 100px)!important;}
	.n_width_120_sp{width: calc(100% - 120px)!important;}
	
	.width_25_sp,.width_50_sp,.width_65_sp,.width_110_sp,.n_width_40_sp,.n_width_50_sp,.n_width_100_sp,.n_width_120_sp{box-sizing: border-box;}
	.height_30_sp{height: 30px;}
	.height_200_sp{height: 200px;}
	.height_100-min_sp{min-height: 100px;}
	
	.mg_clear_sp{margin: 0;}
	.mg_right_sp{margin-left: auto;margin-right: 0;}
	.mg_t-50px_sp{margin-top: 50px;}
	.mg_b-10px_sp{margin-bottom: 10px;}
	.mg_b-50px_sp{margin-bottom: 50px;}
	
	.top_15_sp{top: 15px;}
	.left_15_sp{left: 15px;}
	.left_0_sp{left: 0;}
	
	.border_rad10_sp{border-radius: 10px!important;}
	.shadow_clear_sp{box-shadow: none;}
	#header{
		padding-top: 10px;
        padding-bottom: 13px;
		top: 10px;
	}
	header #logo{width: 100px;}
	.sect_type_wrap.d_flex{
		column-gap: 10px;
		row-gap: 20px;
	}
	.sect_type2{padding: 15% 5%;}
	.sect_type3{padding: 20px;}
	
	.modal_item.sect_type3{padding-top: 50px;}
	
	/********** index **********/
	
	/********** under **********/
	#login #logo{width: 80%;}

	#blog_list #contents .btn_wrap .btn,#blog_list #contents .btn_wrap .btn a,#blog_list #contents .btn_wrap .btn > span,
	#blog_cate_list #contents .btn_wrap .btn,#blog_cate_list #contents .btn_wrap .btn a,#blog_cate_list #contents .btn_wrap .btn > span,
	#cate_list #contents .btn_wrap .btn,#cate_list #contents .btn_wrap .btn a,#cate_list #contents .btn_wrap .btn > span,
	#sub_cate_list #contents .btn_wrap .btn,#sub_cate_list #contents .btn_wrap .btn a,#sub_cate_list #contents .btn_wrap .btn > span,
	#item_list #contents .btn_wrap .btn,#item_list #contents .btn_wrap .btn a,#item_list #contents .btn_wrap .btn > span{width: 100%;box-sizing: border-box;}
	
	#blog_list .con_box .width_200,#blog_list .con_box .n_width_650,#blog_list .con_box .width_350,
	#blog_cate_list .con_box .width_200,#blog_cate_list .con_box .n_width_650,#blog_cate_list .con_box .width_350,
	#cate_list .con_box .width_200,#cate_list .con_box .n_width_650,#cate_list .con_box .width_350,
	#sub_cate_list .con_box .width_200,#sub_cate_list .con_box .n_width_650,#sub_cate_list .con_box .width_350,
	#item_list .con_box .width_200,#item_list .con_box .n_width_650,#item_list .con_box .width_350{
		width: 100%;
		margin-bottom: 10px
	}
	#blog_list .con_box .box_btn,#cate_list .con_box .box_btn,
	#blog_cate_list .con_box .box_btn,#blog_cate_list .con_box .box_btn,
	#sub_cate_list .con_box .box_btn,#item_list .con_box .box_btn{
		width: 100%;
		margin-bottom: 10px;
	}
	
	#blog_new .switch_box{margin-bottom: 0;}
	#blog_new .delete_btn{top: 24px;}
	#blog_list .date{
		bottom: -30px;
		left: 0;
		right: 0;
		margin: auto;
	}
	#seo .cate_box dt,#seo .cate_box dd{width: 100%;}
	#seo .cate_box.keyword input{
		margin-bottom: 5px;
		width: 100%;
	}
}
