@charset "utf-8";
/* CSS Document */
/* =========================
   Base
========================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
body {
	margin: 0;
	font-family:
		"Helvetica Neue",
		Arial,
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;
	font-size: 1.6rem;
	line-height: 1.8;
	color: #333;
	padding-bottom: 60px;
}

main,
section,
header,
footer,
nav,
article,
aside {
	display: block;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
	margin-top: 0;
}

h1,
h2,
h3,
h4 {
	line-height: 1.4;
}

ul,
ol {
	padding-left: 0;
	list-style: none;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

picture {
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
}

button {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
ul {
  list-style: none;
}
hr{
	width: 100%;
	margin: 0;
	border: 0;
	border-top: 3px solid #e6007e;
}
.sp-br{
	display: block;
}
.pc-br, .tb-br{
	display: none;
}

/* =========================================
   Layout
========================================= */
.wrapper {
	overflow: hidden;
    margin: 0 auto;
    width: 100%;
}
.container{
	margin: 0;
	padding: 0;
}
/* =========================================
   Footer common area
========================================= */

/* -------------------------
   旅日記・Instagram
------------------------- */

#link-banner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	width: min(100% - 3rem, 1320px);
	margin-inline: auto;
	padding-block: 3rem;
}

#link-banner a {
	display: block;
}

#link-banner img {
	width: 100%;
	height: auto;
}

/* -------------------------
   共通アイコン
------------------------- */

#common-icon {
	width: min(100% - 3rem, 1200px);
	margin-inline: auto;
	padding-block: 3rem;
}

.icon-box {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.icon-box a {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:1rem;
	transition:.3s;
}

.icon-box img {
	width:85%;
	max-width:180px;
	height:auto;
	transition:.3s;
}
.icon-box a:hover img{
	transform:scale(1.05);
}
/* -------------------------
   コンタクト
------------------------- */

.contact {
	width: min(100% - 3rem, 900px);
	margin-inline: auto;
	padding-block: 3rem;
}

.contact-box {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.contact-box a {
	display: block;
}

.contact-box img {
	width: 100%;
	height: auto;
}

/* =========================================
   Footer animation
========================================= */

#footer-animation {
	width: 100%;
	overflow: hidden;
}

.animation {
	position: relative;
	width: 100%;
}

.animation picture,
.animation picture img {
	display: block;
	width: 100%;
	height: auto;
}

.loop-bus {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
}

.bus img {
	width: 120px;
	height: auto;
}

/* =========================================
   Footer
========================================= */

footer {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	padding: 4rem 2rem 2rem;
	background-color: #f7f7f7;
	color: #333;
}

/* SPでは縦並び */

.footer-left {
	order: 1;
}

.footer-middle {
	order: 2;
}

.footer-nav {
	display: none;
}

.copyright {
	order: 3;
	width: 100%;
	padding-top: 2rem;
	border-top: 1px solid #ddd;
	font-size: 1.2rem;
	line-height: 1.5;
	text-align: center;
}

/* -------------------------
   footer-left
------------------------- */

.footer-left {
	text-align: center;
}

footer address {
	font-style: normal;
}

.logo_footer {
	margin-bottom: 1.5rem;
	font-size: 2rem;
	font-weight: 700;
}

.footer-left p {
	margin-bottom: 0.5rem;
	font-size: 1.4rem;
	line-height: 1.7;
}

.ssl-mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
}

.ssl-mark p {
	max-width: 280px;
	font-size: 1.1rem;
	line-height: 1.6;
}

/* -------------------------
   footer-middle
------------------------- */

.footer-middle {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.footer-middle img {
	width: 130px;
	height: auto;
	margin-block: 1.5rem;
}

.sayfety01 {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.6;
}

.sayfety02 {
	font-size: 1.2rem;
	line-height: 1.7;
}





/*アニメーション*/
.animation{
	position: relative;
	width: 100%;
	overflow: hidden;
}
.loop-bus{
	width: 100%;
	position: absolute;
	bottom: 0;	
}
.bus{
	animation: flowing 8s linear infinite;
}
.bus img{
	width: 10%;
	height: auto;
}

@keyframes flowing{
	0%{
		transform: translateX(100%)
	}
	100%{transform: translateX(-100%);
	}
	
}

/* タブレット (768px〜) */
@media (min-width: 768px) {
	.tb-br{
		display: block;
	}
	.pc-br, .sp-br{
		display: none;
	}
/* 旅日記・Instagram */

	#link-banner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
		padding-block: 4rem;
	}

	/* 共通アイコン */

	.icon-box {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem;
	}

	/* コンタクト */

	.contact-box {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}
}
/* PC (1024px〜) */
@media (min-width: 1024px) {
	.pc-br{
		display: block;
	}
	.tb-br, .sp-br{
		display: none;
	}
	footer {
		display: grid;
		grid-template-columns:
			minmax(280px, 1.1fr)
			minmax(220px, 0.8fr)
			minmax(420px, 1.5fr);
		gap: 4rem;
		align-items: start;
		padding: 5rem max(3rem, calc((100% - 1400px) / 2)) 2rem;
	}

	.footer-left {
		order: initial;
		text-align: left;
	}

	.footer-middle {
		order: initial;
	}

	.footer-nav {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3rem;
	}

	.footer-nav ul {
		margin: 0;
		padding: 0;
	}

	.footer-nav li {
		margin-bottom: 0.8rem;
	}

	.footer-nav a {
		position: relative;
		display: inline-block;
		padding-left: 1.2rem;
		color: #333;
		font-size: 1.3rem;
		line-height: 1.6;
	}

	.footer-nav a::before {
		position: absolute;
		top: 0;
		left: 0;
		content: "›";
		color: #e6007e;
	}

	.footer-nav a:hover {
		color: #e6007e;
	}

	.ssl-mark {
		align-items: flex-start;
	}

	.footer-middle img {
		width: 150px;
	}

	.copyright {
		order: initial;
		grid-column: 1 / -1;
		width: 100%;
		margin-top: 1rem;
		padding-top: 2rem;
		text-align: center;
	}
}
/* PC-wide (1400px〜) */
@media (min-width: 1400px) {
	
}