:root { 
	--standard-blue: rgb(44, 112, 214);
	--standard-blue-background: #05058a;
}

html {
	font-size: 62.5%;
	font-family: sans-serif;
}

@media screen and (max-width: 992px) {
	html {
		font-size: 58%;
	}
}

@media screen and (max-width: 768px) {
	html {
		font-size: 53%;
	}
}

@media screen and (max-width: 576px) {
	html {
		font-size: 48%;
	}
}

h1 {
	font-size: 6rem;
}

h2 {
	font-size: 4rem;
}

h3 {
	font-size: 1.8rem;
}

h4 {
	font-size: 1.3rem;
}

h5 {
	font-size: 1rem;
}

p {
	font-size: 1rem;
}

ul, li {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

a:hover {
	text-decoration: none;
}

#main{
	overflow: hidden;
}

/**
 * sticky header
 */
nav {
	display: none;
	position: fixed;
	top: 5vh;
	z-index: 5;
	left: 50%;
	transform: translate(-50%, 0%);
	margin: auto;
	max-width: 950px;
	width: 75%;
    height: 7vw;
    max-height: 60px;
	border-radius: 30px;
	filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.4));
	background: #ffffffcc;
	justify-content: space-between;
	padding: 5px 10px;
	-webkit-font-smoothing: none;
	-webkit-font-smoothing: antialiased;
	-webkit-font-smoothing: subpixel-antialiased;
}

nav .logo {
	height: 100%;
	width: auto;
}


nav ul {
	display: inline-flex;
	align-items: center;
}

nav li {
	/* width: 45px; */
	height: 45px;
	border-radius: 25px;
	margin-right: 0.3vw;
	padding: 10px;
	display: flex;
	justify-content: center;
	text-align:center;
	align-items: center;
	color: white;
	cursor: pointer;
}

nav li.trunk_room_btn {
	background-color: green;
}

nav li.document_storage_btn {
	background-color: blue;
}

nav li.rental_storage_space_btn {
	background-color: #ec8a9b;
}

nav li.service_comparison_btn {
	width: auto;
	background-color: #ffec64;
	padding: 0 15px;
	color: black;
}

@media screen and (max-width: 992px) {
	nav {
		width: 90%;
	    height: 8.5vw;
	}
	nav .logo {
		height: auto;
		width: 25vw;
	}
	nav li {
	    /* width: 7.5vw; */
    	padding: 2vw;
	    height: 7.5vw;
	    max-height: 40px;
	    border-radius: 3.75vw;
	}
}

/**
 * header
 */
h1 {
	margin: 0;
	width: 100%;
	padding: 0;
	width: 100%;
}

h1 img.main {
	width: 100%;
}

/**
 * 利用シーン
 */
.usage_exapmle {
	padding: calc(3vw + 20px) 0;
}

.usage_exapmle .usage_one {
	margin-bottom: 15px;
}

.usage_contents h3 {
	display: flex;
	align-items: center;
	font-size: 3rem;
	color: var(--standard-blue);
	width: 55vw;
	margin: auto auto 20px;
}

.usage_exapmle p.tagline {
	font-size: 2.7rem;
	color: gray;
	text-align: center;
	margin: auto auto calc(3vw + 45px);
	line-height: 4.8rem;
}

.usage_contents h3 i {
	margin-right: 10px;
}

.usage_contents p {
	font-size: 2rem;
	color: gray;
	line-height: 3rem;
	width: 37vw;
}

.usage_exapmle .top_line {
	height: 20px;
	border-top: solid 1px var(--standard-blue);
}

.usage_exapmle .bottom_line {
	height: 20px;
	border-bottom: solid 1px var(--standard-blue);
}

.usage_exapmle .top_line, .usage_exapmle .bottom_line {
	height: 20px;
	width: 80vw;
	position: relative;
}

.usage_exapmle .top_line.right, .usage_exapmle .bottom_line.right {
	border-left: solid 1px var(--standard-blue);
	left: 20vw;
}

.usage_exapmle .top_line.left, .usage_exapmle .bottom_line.left {
	border-right: solid 1px var(--standard-blue);
}

.usage_exapmle .usage_contents_main {
	display: flex;
	align-items: flex-end;
	width: 70vw;
	position: relative;
	margin-bottom: -20px;
}

.usage_exapmle .usage_contents_main.left {
	right: -8vw;
}

.usage_exapmle .usage_contents_main.right {
	left: 23vw;
}

@media screen and (max-width: 768px) {
	.usage_exapmle .top_line, .usage_exapmle .bottom_line {
	    width: 95vw;
	}
	
	.usage_exapmle .top_line.right, .usage_exapmle .bottom_line.right {
		left: 5vw;
	}
	.usage_contents h3 {
	    width: 75vw;
	    font-size: 4.2vw;
	    justify-content: center;
	}
	.usage_exapmle .usage_contents_main {
		width: 90vw;
	}
	
	
	.usage_exapmle .usage_contents_main.left {
		right: -2.5vw;
	}
	
	.usage_exapmle .usage_contents_main.right {
		left: 7.5vw;
	}
	
	.usage_contents_main img {
    	width: 25vw;
	}
	.usage_contents p {
		width: 65vw;
	    font-size: 3vw;
    	line-height: 5.5vw;
	}
}

/**
 * eye catch area
 */
.eye_catch_area {
	background: #05058a;
}

h3.eye_catch_text {
	color: white;
	font-size: 5rem;
	margin-bottom: 13px;
}

.eye_catch_area {
	margin-bottom: calc(3vw + 50px);
	padding-top: 65px;
	text-align: center;
	color: white;
	padding-top: 65px;
}

.eye_catch_area ul {
	width: 67%;
	margin: 0px auto 16px;
	padding: 0;
}

.eye_catch_area ul {
	width: 78%;
	margin: 0px auto 16px;
	padding: 0;
}

@media screen and (max-width: 992px) {
	.eye_catch_area ul {
		width: 95%;
	}
}


.eye_catch_area li {
	height: 70px;
	font-size: 2rem;
}

.eye_catch_area span.box {
	border-right: 1px solid white;
	border-bottom: 1px solid white;
	border-left: 1px solid white;
	width: 96%;
	position: absolute;
	height: 40%;
	top: 15px;
	left: 2%;
}

.eye_catch_area .service_explain {
	display: inline-block;
	padding: 5px 32px;
	border: 1px solid white;
	border-radius: 35px;
	font-size: 3rem;
}

.eye_catch_area .angle {
	position: relative;
	width: 4.5vw;
	height: 4.5vw;
	background: #05058a;
	transform: translate(-50%, 2.1vw) rotate(45deg);
	left: 50%;
}

@media screen and (max-width: 768px) {
	h3.eye_catch_text {
		font-size: 5vw;
	    margin-bottom: calc(10px + 3.5vw);
	}
	.eye_catch_area li {
	    font-size: 3.5vw;
	    height: 60px;
	    margin-bottom: calc(5px + 1vw);
	}
	.eye_catch_area .service_explain {
	    margin-bottom: 30px;
	    font-size: 4vw;
	}
	.eye_catch_area span.box {
		top: calc(5px + 2.5vw);
	}
}


/**
 * parts
 */
.strong_title {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: calc(3vw + 0px);
}

.strong_title h2 {
	font-size: 5.2rem;
	text-align: center;
	margin: auto 10px;
}

.strong_title .left_rotate, .strong_title .right_rotate {
	border-right: solid 0.6vw red;
	border-bottom: solid 0.6vw red;
	height: 70px;
	width: 70px;
	box-sizing: border-box;
	margin: 0vw;
}


@media screen and (max-width: 992px) {
	.strong_title h2 {
		font-size: 5vw;
	}
}

@media screen and (max-width: 768px) {
	.usage_exapmle p.tagline {
	    font-size: 3vw;
	    line-height: 7vw;
	}
	.strong_title .left_rotate, .strong_title .right_rotate {
		height: 10vw;
		width: 10vw;
	}
}

.strong_title .left_rotate {
	transform: rotate(-45deg) scale(0.5);
}

.strong_title .right_rotate {
	transform: rotate(135deg) scale(0.5);
}

h2.main_section_header {
	-webkit-text-stroke: 0.11vw white;
	text-stroke: 0.11vw white;
	font-weight: bold;
	background-image: url(../images/common/cube_blue.svg);
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 14rem;
	background-size: 14rem;
	padding: 0;
	margin-bottom: 35px;
}

.point_area, .example_area {
	display: flex;
	max-width: 1140px;
	margin: auto auto 30px;
}

.parallax_area {
    position: relative;
    top: -100px;
}

.parallax_left,
.parallax_right{
    position: absolute;
    top: 30vw;
    z-index: 2;
    opacity: 0;
    filter: blur(20px);
}
.parallax_right{
    right: -11vw;
    width: 19vw;
    height: 15.5vw;
}

.parallax_left_move,
.parallax_right_move{
    top: 0;
    opacity: 2;
    filter: blur(0);
	
}
.parallax_right_move{
    transform: rotate(181deg);
}

.parallax_left{
    left: -6vw;
    width: 17vw;
    height: 17vw;
}

.parallax_left_move{
    transform: rotate(179deg);
}

/**
 * supplement title
 */
.supplement_title {
	line-height: 0.6rem;
	margin-bottom: 35px;
	text-align: center;
	color: #05058a;
	font-size: 3rem;
}

.supplement_title .under_bar1, .supplement_title .under_bar2 {
	border: solid 1px #05058a;
	display: inline-block;
}

.supplement_title .under_bar1 {
	width: 50vw;
}

.supplement_title .under_bar2 {
	width: 46vw;
}

.supplement_title h3 {
	margin: 11px auto;
	font-size: 3rem;
}

.supplement_title_sub {
	line-height: 0.6rem;
	margin-bottom: 35px;
	text-align: center;
	color: #05058a;
	font-size: 3rem;
}

.supplement_title_sub h4 {
	color: gray;
	width: 95%;
	margin: auto;
	font-size: 1.5rem;
	display: flex;
	align-items: center;
}

.supplement_title_sub h4:before, .supplement_title_sub h4:after {
	border-top: 1px solid;
	content: "";
	flex-grow: 1;
}

.supplement_title_sub h4:before {
	margin-right: 1rem;
}

.supplement_title_sub h4:after {
	margin-left: 1rem;
}

/**
 * point
 */
.point_one {
	display: flex;
	margin-bottom: calc(3vw + 30px);
	justify-content: center;
}

.point_one .point_num {
	border: 1px solid #05058a;
	border-radius: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 70px;
	height: 70px;
}

.point_one .point_num .text, .point_area .point_num .num {
	color: #05058a;
}

.point_one .point_num .text {
	font-size: 1.3rem;
	line-height: 1rem;
}

.point_one .point_num .num {
	font-size: 3.2rem;
	line-height: 3.2rem;
}

.point_one .point_text {
	padding: 0 21px;
	width: calc(60vw - 100px);
}

.point_one .point_text h4 {
	font-size: 2.5rem;
	border-bottom: 1px solid #05058a;
	color: #05058a;
}

.point_one .point_text p {
	font-size: 1.5rem;
	color: gray;
}


@media screen and (max-width: 768px) {
	.point_one {
	    display: block;
	}
	.strong_title .left_rotate, .strong_title .right_rotate {
		height: 10vw;
		width: 10vw;
	}
	.point_one .point_num {
	    margin: auto auto calc(3vw + 5px);
	    width: 90px;
	    height: 90px;
	    border-radius: 45px;
	}
	.point_one .point_text {
	    width: 100%;
	    text-align: center;
	}
}

.example_area {
	justify-content: center;
}

.example_area .service_image {
	text-align: center;
}

.example_area img {
	max-width: 100%;
	height: auto;
	display: inline-block;
	margin-bottom: 4vw;
}

/**
 * inquire
 */
.inquire_area {
	background: #05058a;
	padding: 45px 0;
	margin: 0 auto 45px;
	background-image: url(../images/common/cube_blue.svg);
	background-repeat: no-repeat;
	background-position-x: 92vw;
	background-position-y: -3vw;
	background-size: 14vw;
}

.inquire_area h4, .inquire_area h4 a, .inquire_area p {
	color: white;
}

.inquire_area h4 {
	text-align: center;
	font-size: 1.8rem;
	margin-bottom: 15px;
}

.inquire_area h4.tel {
	margin-bottom: 0px;
}

.inquire_area h4.tel a {
	font-size: 4rem;
}

.inquire_area a.inquire_btn {
	font-size: 3rem;
	padding: 5px 50px;
	border: 1px solid yellow;
	border-radius: 50px;
	color: yellow;
}

.inquire_area a.inquire_btn:hover {
	background-color: #ffff0059;
	transition: background-color 0.5s;
}

.inquire_area p.bussiness_time {
	text-align: center;
	font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
	.inquire_area a.inquire_btn {
	    margin: auto;
	}
}

/**
 * youtube area
 */
.movie_area {
	height: 32vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	background-color: #8dc3e8;
	margin : calc(17vw + 120px) 0 calc(5vw + 30px) 0;
}

.movie_area.with_small_movie {
	margin-bottom: calc(5vw + 200px);
}

.movie_area .main_movie {
	height: 34vw;
	width: 58vw;
	position: absolute;
	top: -18vw;
	filter: drop-shadow(5px 5px 7px rgba(0, 0, 0, 0.4));
}

.movie_area .movie_image {
	z-index: 2000;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0vw;
	left: 0vw;
}

.movie_area .movie_btn {
	position: absolute;
	top: 15.1vw;
	left: 26.5vw;
	background-position: center;
	background-size: cover;
	z-index: 4000;
	width: 5.4vw;
	height: 5.4vw;
	border: 0;
	border-radius: 50%;
}

.movie_area .small_movies {
	height: 17vw;
	width: 68vw;
	position: absolute;
	bottom: -11vw;
	display: flex;
}

.small_movies .movie {
	margin: 1vw 1.2vw 0;
}

.small_movies .movie .modal_trigger {
	padding: 0 0.4vw 5vw 0;
	font-size: 2.4vw;
	z-index: 2;
	color: white;
	position: relative;
	background-position: center;
	background-size: cover;
	width: 15vw;
	height: 15vw;
	border-radius: 50%;
}

.movie_area .main_movie iframe, .movie_area .small_movies iframe {
	width: 100%;
	height: 100%;
}

.movie_area .main_movie_ni iframe, .movie_area .small_movies iframe {
	width: 100%;
	height: 100%;
}
.movie_area .modal-player {
	height: 34vw;
	width: 58vw;
	position: absolute;
	top: 7vw;
	left: 20.9vw;
}

.movie_area .movie_image {
	z-index: 2000;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0vw;
	left: 0vw;
}

.movie_area .movie_btn {
	position: absolute;
	top: 15.1vw;
	left: 26.5vw;
	background-position: center;
	background-size: cover;
	z-index: 4000;
	width: 5.4vw;
	height: 5.4vw;
	border: 0;
	border-radius: 50%;
}

.movie_area .movie_btn:hover {
	outline:none;
}

.small_movie_image {
	z-index: 2000;
	height: 34.3vw;
	width: 58vw;
	position: absolute;
	top: 7vw;
	left: 21vw;
	filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.6));
}

.small_movie_btn {
	position: absolute;
	top: 21.1vw;
	left: 46.5vw;
	background-position: center;
	background-size: cover;
	z-index: 4000;
	width: 7.4vw;
	height: 7.4vw;
	border: 0;
	border-radius: 50%;
}

.movie_area p.text {
	margin: 20vw 0 2vw 0;
	font-size: 2.5vw;
	color: white;
}

@media screen and (max-width: 768px) {
	.movie_area {
		margin: calc(22vw + 100px) 0 calc(5vw + 30px) 0;
	}
	.movie_area .main_movie {
	    height: 49vw;
	    width: 80vw;
	    top: -27vw;
	}
	.movie_area .movie_btn {
	    top: 23.1vw;
	    left: 36.5vw;
	}
	.movie_area.with_small_movie {
	    margin-bottom: calc(15vw + 30px);
	}
	.movie_area p.text {
	    margin: 23vw 0 2vw 0;
	}
}

/**
 * sales point
 */
.sales_points {
	max-width: 980px;
	margin: 0 auto calc(3vw + 20px) auto;
}

.sales_points .point {
	margin-top: 10px;
}

.sales_points .image {
	border: solid 2px var(--standard-blue-background);
	height: auto;
	width: 95%;
	padding: 0.5vw;
}

.sales_points .message {
    text-align: center;
    font-size: 1.5rem;
    border: solid 2px var(--standard-blue-background);
    height: calc(20px + 6vw);
    width: 95%;
    color: white;
    background-color: var(--standard-blue-background);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 768px) {
	.sales_points .message {
		height: calc(20px + 10vw);
		font-size: 2.5vw;
	}
}

.card_area {
	max-width: 980px;
	width: 90%;
	margin: 0 auto calc(3vw + 20px) auto;
	flex-direction: row;
	border-radius: 0.5vw;
	filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2));
	overflow: hidden;
}

.card_area .card-img-top {
	width: 23vw;
}

.card_area h3 {
	margin: 10px 10px 22px;
	font-size: 1.3rem;
}

.card_area h4 {
	margin: 10px;
	font-size: 1.2rem;
	text-decoration: underline;
}

.card_area p {
	margin: 10px;
	font-size: 1rem;
}

.card_area p.additional {
	margin: 20px 10px 10px;
	font-size: 1rem;
}

/**
 * バナーエリア
 */
.banner_area {
	margin-bottom: 75px;
}

.banner_area a.banner {
	display: block;
	width: 80%;
	margin: 0 auto 26px;
	filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2));
}

.banner_area img {
	width: 100%;
}

@media screen and (max-width: 768px) {
	.banner_area a.banner {
	    width: 100%;
	}
}

/**
 * 店舗情報エリア
 */
.store_area .store_list {
	text-align: left;
	padding: 1rem 2rem;
	margin: 0rem auto 2rem;;
	color: #00b3db;
}

.store_area .store_list li {
	display: inline-block;
	text-align: left;
}

.store_area .store_list a {
	border-bottom: 1px solid #ffa325;
	display: block;
	text-align: left;
	font-weight: bold;
	font-size: 1.5rem;
	position: relative;
	padding-bottom: 1px;
	border-radius: 0;
	color: black;
}

.store_area .store_list a:before {
	content: '';
	position: absolute;
	right: 21px;
	top: 50%;
	border-top: 1px solid #ffa325;
	width: 16px;
}

.store_area .store_list a:after {
	content: '';
	position: absolute;
	right: 20px;
	top: calc(50% - 3px);
	border-top: 1px solid #ffa325;
	width: 8px;
	transform: rotate(45deg);
}

.store_area .store_list span {
	font-size: 1.5rem;
	display: block;
	color: #7b7b7b;
	padding: .1rem .75rem;
	height: 50px;
	margin-bottom: 1rem;
}

/**
 * サービス比較
 */
.service_comparison img {
	display: block;
	margin: 15px auto 75px;
	width: 90%;
	max-width: 750px;
}

/**
 * area list
 */
.area_block .area_list {
	margin: 3vw auto calc(3vw + 50px);
}

.area_block .area_list dl, .area_block .area_list .prefecture,
	.area_list .city, .area_list img {
	width: 100%;
}

.area_block .area_list .prefecture, .area_list .city, .area_list .city_list
	{
	text-align: left;
}

.area_block  .area_list .prefecture {
	border-bottom: solid 1px #b1afaf;
	margin: 0 0 1rem;
	font-size: 1.3rem;
}

.area_block  .area_list .city {
	padding: 0;
	margin: 0;
}

.area_block  .city a {
	font-size: 0.8rem;
}

.area_block  .city_list {
	font-size: 0.8rem;
	margin-left: 0.5rem;
	color: #929292;
}

.area_block  .area_list .city_list a {
	margin-right: 1rem;
}

/**
 * footer
 */
.
inner, footer, footer
	.copyright_area, footer
	.img-responsive {
	width: 100%;
}

.inner {
	max-width: 1200px;
	display: block;
	margin: 0 auto;
}

footer {
	background-color: #000000;
	color: white;
	padding: 70px 20px;
	margin-bottom: -3vw;
}

footer .inner {
	display: flex;
}

footer * {
	color: white !important;
}

footer h5 {
	font-size: 1.2rem;
	font-weight: bold;
}

footer h6 {
	font-size: 0.9rem;
	font-weight: bold;
	padding-left: 1rem;
}

footer ul {
	padding: 1rem;
	list-style: none;
}

footer li {
	font-size: 0.8rem;
}

footer  .site-info {
	font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
}

.sticky_footer {
	height: 2.9vw;
	display: flex;
	justify-content: flex-end;
	padding-right: 2vw;
    position: fixed;
    bottom: 0;
    right: 0;
	opacity: 0;
}

.sticky_footer .message_box {
	width: 12vw;
	height: 3vw;
	border-bottom: 3vw solid var(--standard-blue);
	border-left: 1vw solid transparent;
	border-right: 1vw solid transparent;
	display: flex;
	justify-content: center;
}

.sticky_footer .message_box .message {
	color: white;
	position: absolute;
	top: 0.6vw;
	font-size: 1.3vw;
	text-decoration: none;
}

.opacity {
	opacity: 1;
}