// Scss Document
/*--------------------
共通設定
----------------------*/
$eng:'Raleway', sans-serif;;
$breakpoint-notepad: 1500px; 
$breakpoint-tablet: 1000px; 
$breakpoint-mobile: 800px;
@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:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #000000;
	list-style: none;
	text-align: center;
	min-width: 0;
	min-height: 0;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
a {
	text-decoration: none;
	&.disabled {
		pointer-events: none;
	}
}
.fadein {
	opacity: 0;
	transform: translateY(0);
	transition: all .8s;
}
.footer_copy {
	margin-top: 20px;
	margin-bottom: 10%;
	& p {
		text-align: center;
		font-size: 0.7em;
		padding-bottom: 20px;
		font-family: $eng;
		@include max-screen($breakpoint-mobile) {
			padding-bottom: 25%;
		}
	}
}
#global-nav {
	width: 100%;
	text-align: center;
	height: 40px;
	background: rgba(0,0,0,1.0);
	position:fixed;
	opacity: 0;
	z-index: 10000;
    & a {
        max-width: 300px;
		& img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			max-width: 65px;
			filter: brightness(0) invert(1);
		}
    }
	&.m_fixed {
		opacity: 1;
        position: fixed;
        top: 0;
        z-index: 9999;
		transition: all .5s;
	}
}
body {
	overflow-x: hidden;
}
/*------------------------------------------------*/
.lp_warapper {
	max-width: 1920px;
	margin: 0 auto;
	& .mv {
		margin-bottom: 20%;
		@include max-screen($breakpoint-mobile) {
			margin-bottom: 40%;
		}
	}
	& section {
		max-width: 1080px;
		margin: 0 auto 30%;
		@include max-screen($breakpoint-mobile) {
			margin-bottom: 60%;
		}
		& .left {
			text-align: left;
			& img {
				@include max-screen($breakpoint-mobile) {
					width: 57%;
				}
			}
		}
		& .right {
			text-align: right;
			& img {
				@include max-screen($breakpoint-mobile) {
					width: 57%;
				}
			}
		}
		& .flex {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			@include max-screen($breakpoint-mobile) {
				flex-wrap: wrap;
			}
			& div {
				@include max-screen($breakpoint-mobile) {
					text-align: left;
				}
			}
			& img {
				@include max-screen($breakpoint-mobile) {
					width: 57%;
				}
			}
		}
		&#code01 {
			& .left {
				margin-bottom: 10%;
				@include max-screen($breakpoint-mobile) {
					margin-bottom: 20%;
				}
			}
			& .flex {
				margin-top: -10%;
				@include max-screen($breakpoint-mobile) {
					margin-top: -6%;
				}
			}
		}
		&#code02 {
			& .left {
				margin-bottom: 10%;
				@include max-screen($breakpoint-mobile) {
					margin-bottom: 20%;
				}
			}
			& .right {
				position: relative;
				z-index: 2;
			}
			& .flex {
				margin-top: -30%;
				position: relative;
				z-index: 1;
			}
		}
		&#code03,&#code04 {
			& .left {
				margin-bottom: 10%;
				@include max-screen($breakpoint-mobile) {
					margin-bottom: 20%;
				}
			}
			& .right {
				position: relative;
				z-index: 2;
			}
			& .flex {
				position: relative;
				z-index: 1;
				margin-top: -10%;
			}
		}
		&#code05 {
			& .right {
				margin-bottom: 10%;
				@include max-screen($breakpoint-mobile) {
					margin-bottom: 20%;
				}
			}
			& .left {
				position: relative;
				z-index: 2;
			}
			& .flex {
				position: relative;
				z-index: 1;
				margin-top: -10%;
				& div {
					&.codelist {
						order: 1;
						@include max-screen($breakpoint-mobile) {
							order: 2;
						}
					}
					&.image {
						order: 2;
						@include max-screen($breakpoint-mobile) {
							order: 1;
							text-align: right;
						}
					}
				}
			}
		}
	}
}
.codelist {
	max-width: 40%;
    margin: 0 auto;
	padding: 0 3%;
	@include max-screen($breakpoint-mobile) {
		max-width: 90%;
		margin-top: 10%;
	}
	& h3 {
		text-align: left;
		font-family: $eng;
		font-size: 2.5em;
		font-weight: 900;
		margin-bottom: 10%;
		@include max-screen($breakpoint-mobile) {
			font-size: 1.5em;
		}
	}
	& p {
		font-size: 0.8em;
		text-align: left;
		line-height: 2.0;
		margin-bottom: 10%;
		@include max-screen($breakpoint-mobile) {
			font-size: 0.7em;
		}
	}
}
.ac_box {
    width: auto;
    margin: 0 auto;
    z-index: 100;
    position: relative;
	& label {
        background: #fff;
        position: relative;
        display: block;
		cursor: pointer;
		border: 1px solid #000;
        transition: all 0.5s;
        font-family: $eng;
        font-size: 0.8em;
		font-weight: 400;
		padding: 1.0em 1.5em 1.0em 1.0em;
        margin: 0 auto;
		&::before {
            display: block;
            content: '';
            position: absolute;
            width: 9px;
            height: 9px;
			border-left: 1px solid #000;
			border-bottom: 1px solid #000;
            top: 43%;
			transform: translateY(-45%) rotate(-45deg);
            margin: auto;
            right: 20%;
            transition: all .3s;
		}
		&:hover {
			background: #000;
			color: #fff;
			&::before {
				border-left: 1px solid #fff;
				border-bottom: 1px solid #fff;
			}
		}
	}
	& input {
	  	display: none;
		&:checked ~ label {
			&::before {
			  	transform: rotate(135deg);
			}
		}
		&:checked ~ div {
			  height: auto;
			  padding: 5px;
			  opacity: 1;
		}
	}
	& .ac_small {
        height: 0px;
        padding: 0px;
        overflow: hidden;
        opacity: 0;
        transition: 0.5s;
	}
	& div ul {
		margin: 5% auto 0;
		& li {
			margin-bottom: 2%;
			& a {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
			}
		}
		& div {
			&:first-child {
				width: 30%;
				& img {
					width: 100%;
				}
			}
			&:last-child {
				width: 70%;
				display: inline-flex;
				flex-wrap: wrap;
				align-items: center;
				box-sizing: border-box;
				padding-left: 5%;
				& p {
					font-size: 0.7em;
					text-align: left;
					letter-spacing: 1px;
					& span {
						font-size: 100%;
					}
				}
			}
		}
	}
}
.foot {
	width: 100%;
	border-bottom: 1px solid #000;
	& img {
		max-width: 100px;
		padding-bottom: 20px;
	}
}