// Scss Document
/*--------------------
共通設定
----------------------*/
$eng:'Raleway', sans-serif;
$number:'Roboto', sans-serif;
$breakpoint-notepad: 1500px; 
$breakpoint-tablet: 800px; 
$breakpoint-mobile: 600px;
@mixin max-screen($break-point) { 
  @media screen and (max-width: $break-point) {
    @content;
  }
}
@mixin min-screen($break-point) { 
  @media screen and (min-width: $break-point) {
    @content;
  }
}
@mixin screen($break-point-min, $break-point-max) { 
  @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
    @content;
  }
}

* {
	margin: 0;
	padding: 0;
	letter-spacing: 0.1em;
	font-family: 'Noto Sans JP', sans-serif;
	color: #111111;
	font-size: 16px;
	text-align: center;
}
img {
	width: 100%;
}
a {
	text-decoration: none;
	&.disabled {
		pointer-events: none;
		text-decoration: none;
	}
}
.pc {
  display: block;
  @include max-screen($breakpoint-tablet) {
    display: none;
  }
}
.sp {
  display: none;
  @include max-screen($breakpoint-tablet) {
    display: block;
  }
}
.fadein {
	opacity: 0;
	transform: translateY(0px);
	transition: all 1.5s;
}
body {
	overflow-x: hidden;
}
#pagetop {
	width: 50px;
	height: 50px;
	position: fixed;
	right: 11px;
	bottom: 30px;
	background: #FFF;
	opacity: 0.6;
	border-radius: 5px;
	border: 0.5px solid #666;
	z-index: 50;
	& a {
		position: relative;
		display: block;
		width: 50px;
		height: 50px;
		text-decoration: none;
		text-align: center;
		&::before {
			content: '';
			display: block;
			position: absolute;
			top: 39%;
			left: 36%;
			width: 14px;
			height: 14px;
			border-right: 2px solid #666;
			border-bottom: 2px solid #666;
			-webkit-transform: rotate(-135deg);
			transform: rotate(-135deg);
		}
	}
}
.footer_copy {
	text-align: center;
	margin-bottom: 10px;
	& p {
		font-size: 0.7em;
	}
}
#global-nav {
	width: 100%;
	text-align: center;
	height: 50px;
	background: rgba(255,255,255,0.8);
	position:fixed;
	z-index: 1000;
    & a {
        max-width: 300px;
		& img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			max-width: 90px;
			@include max-screen($breakpoint-mobile) {
				max-width: 70px;
			}
		}
    }

}
body {
	overflow-x: hidden;
}
/*----------------------------------------------------------*/
.lp_wrapper {
	max-width: 1920px;
	margin: 0 auto;
	padding-top: 50px;
}
.mv {
	margin-bottom: 15%;
}
.mainTxt {
	max-width: 550px;
	margin: 15% auto;
	@include max-screen($breakpoint-tablet) {
		width: 80%;
		margin: 20% auto;
	}
	& p {
		font-size: 0.9em;
		line-height: 2.5;
		& span {
			font-size: 100%;
			font-weight: 600;
		}
		@include max-screen($breakpoint-tablet) {
			font-size: 0.8em;
			text-align: left;
		}
	}
}
.image {
	max-width: 650px;
	margin: 0 auto;
	@include max-screen($breakpoint-tablet) {
		width: 70%;
	}
}

section {
	margin: 15% auto;
	max-width: 900px;
	@include max-screen($breakpoint-tablet) {
		margin-top: 30%;
	}
	@include max-screen($breakpoint-mobile) {
		margin-top: 50%;
	}
	& h2 {
		font-size: 2.5em;
		font-family: $eng;
		margin-bottom: 5%;
		@include max-screen($breakpoint-tablet) {
			line-height: 1.0;
			font-size: 2.0em;
		}
		@include max-screen($breakpoint-mobile) {
			margin-bottom: 10%;
		}
		& span {
			font-size: 50%;
			@include max-screen($breakpoint-tablet) {
				font-size: 40%;
			}
		}
	}
	& div {
		margin: 5% auto 15%;
		@include max-screen($breakpoint-tablet) {
			width: 80%;
		}
		& p {
			font-size: 0.8em;
			margin: 2% 1%;
			text-align: left;
			line-height: 1.8;
			@include max-screen($breakpoint-mobile) {
				margin: 5% 1%;
				font-size: 0.7em;
			}
		}
	}
	& .box {
		margin: 0 auto 30%;
		@include max-screen($breakpoint-tablet) {
			width: 90%;
		}
		& .number {
			margin-bottom: 40px;
			text-align: left;
			@include max-screen($breakpoint-tablet) {
				margin-bottom: 10px;
			}
			& span {
				font-size: 5.5em;
				position: relative;
				letter-spacing: 1px;
				font-family: $number;
				@include max-screen($breakpoint-tablet) {
					font-size: 3.2em;
				}
				&::before {
					content: "";
					width: 2px;
					height: 220px;
					background: #222222;
					display: block;
					position: absolute;
					right: -50px;
					top: 20px;
					@include max-screen($breakpoint-tablet) {
						    height: 120px;
							right: -15px;
							top: 10px;
					}
				}
			}
		}
	}
}
.TOP_txt {
	max-width: 900px;
	margin: 0 auto;
    text-align: left;
	padding: 60px;
	text-align: left;
	@include max-screen($breakpoint-tablet) {
		margin-left: 5%;
	}
	& a {
		text-decoration: none;
		color: #333;
		letter-spacing: 0.15em;
		font-size: 18px;
		font-family: 'Lora', serif;
		position: relative;
		transition: 0.5s;
		&:before, &:after {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			left: -100%;
			height: 1px;
			background: #555;
		}
		&:before {
			width: 45px;
			transform: translate(15px, 0px);
		}
		&:after {
			width: 10px;
			transform-origin: right center;
			transform: translate(5px, 0px) rotate(145deg);
		}
	}
}
.codelist {
    font-size: 0.7em;
    line-height: 2.5;
	@include max-screen($breakpoint-tablet) {
		width: 100%;
	}
	& .ac_box {
		width: auto;
        margin: 5% auto;
        z-index: 100;
        position: relative;
      	& label {
          	text-align: center;
            background: #000;
            position: relative;
            display: block;
            cursor: pointer;
            color: #fff;
            transition: all 0.5s;
            max-width: 250px;
            padding: 10px 25px 10px 10px;
            font-size: 1.2em;
            margin-bottom: 3%;
            border: 1px solid #fff;
			@include max-screen($breakpoint-mobile) {
				font-size: 0.8em;
				max-width: 200px;
			}
            &:hover {
            	transition: all .3s;
            }
          	&:after, &:before {
				display: block;
				content: '';
				background-color: #fff;
				position: absolute;
				width: 13px;
				height: 1px;
				top: 0;
				bottom: 0;
				margin: auto;
				right: 15%;
            }
          	&:before {
				transition: .4s;
				top: 0;
				transform: rotate(90deg);
				-webkit-transform:rotate(90deg);
				-moz-transform :rotate(90deg);
          	}
      	}
      	& input {
			transition: .4s;
        	display: none;
		  	&:checked ~ label::before {
				transform: rotate(0deg);
				-webkit-transform:rotate(0deg);
				-moz-transform :rotate(0deg);
				transition: .4s;
			}
      	}
		& .ac_small {
            height: 0px;
            padding: 0px;
            overflow: hidden;
            opacity: 0;
            transition: 0.5s;
        }
		& input:checked ~ div {
			height: auto;
			padding: 5px;
			opacity: 1;
			width: 100%;
		}
		& div ul li a {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
		}
		& .item_img {
			width: 15%;
			margin: 0 auto;
			@include max-screen($breakpoint-mobile) {
				width: 25%;
			}
		}
		& .item_data {
			width: 85%;
			display: inline-flex;
			flex-wrap: wrap;
			align-items: center;
			box-sizing: border-box;
			padding-left: 5%;
			margin: 0 auto;
			& p {
				font-size: 0.8em;
				& span {
					font-size: 100%;
				}
			}
			@include max-screen($breakpoint-mobile) {
				width: 75%;
			}
		}
	}
}