@charset "utf-8";

body {
	margin:0;
	color: #161616;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Lucida Grande", Verdana, "ＭＳ Ｐゴシック", sans-serif;
	font-size: 1rem;
}
* { box-sizing: border-box }
a {
	color: #0329ce;
	text-decoration:none;
}
a:hover,a:active,a:focus{
	color: #819faf;
	text-decoration:underline;
}
/* 共通 */
h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	font-size:4.5rem;
}
h2 {
	font-size:2.8rem;
	font-weight:700;
}
h3 {
	font-size:2.5rem;
	font-weight:700;
}
p { font-size:1.25rem; }

@media (max-width: 768px) {
	h2 { font-size:2.2em; }
	h3 { font-size:1.8em; }
	p { font-size:1.25em; }
}
@media (max-width: 480px) {
	h2 { font-size:1.6em; }
	h3 { font-size:1.4em; }
	p { font-size:1em; }
}
img { height:auto; }
.al-c { text-align:center; }
.con-ttl {
	margin: 0 auto;
	text-align:center;
}
.con-ttl .con-ttl_img { margin-bottom:5px; }
.con-ttl .con-ttl_img img { max-width:300px; }
.con-ttl .con-ttl_txt {
	margin-top: 0;
	padding: 0 15px;
}

/* メインコンテンツ */
#main {
	width:100%;
	margin:0 auto;
	overflow-x: hidden;
}
#hero {
	width:100vw;
	height:77vh;
	background-size:cover;
	background-repeat: no-repeat;
	background-image: url(../images/hero.png);
	margin:0 auto;
	max-width:100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.image-container {
	position: relative;
	display: flex;
	overflow: hidden;
	padding:4rem 0;
}
.image-container .slide {
	flex: 1 0 25%;
	box-sizing: border-box;
	padding:1rem;
}
.image-container .slide img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 1280px) {
	#hero {
		width:100%;
		height:auto;
		background-image: url(../images/hero-sp.png);
	}
	.image-container {
		display: flex;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding:1rem 5%;
	}
	.image-container .slide {
		flex: 0 0 44%;
		scroll-snap-align: center;
		margin:0 10px;
		transition: transform 0.3s ease;
	}
	.image-container .slide img {
		width: 100%;
		heigth:auto;
		display:block;
		height: auto;
	}
	.image-container::-webkit-scrollbar { display: none; }
}
@media (max-width: 768px) {
	.image-container .slide {
		flex: 0 0 80%;
	}
}
@keyframes fadeInOut {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}
.swipe-image {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	max-width: 50px;
	height: auto;
	z-index: 10;
	animation: fadeInOut 8s ease-in-out infinite;
}
.hero-logo {
	margin:0;
	padding:0;
	position: absolute;
	bottom: 20.2%;
	left: 10%;
	transform: translate(-10%, -20.2%);
}
.hero-logo img {
	width:100%;
	max-width:700px;
}
@media (max-width: 1024px) {
	.swipe-image { display: block; }
	.hero-logo {
		bottom: 20%;
		left: 50%;
		transform: translate(-50%, -20%);
	}
	.hero-logo img {
		width:100%;
		min-width:300px;
	}
}

.contents {
	margin:4rem auto;
	padding:6rem 0;
}

@media (max-width: 768px) {
	.contents {
		margin:2rem auto;
		padding:2rem 0;
	}
}

.sec-title {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"item-a item-b"
		"item-a item-c";
	gap: 10px;
	max-width:1200px;
	margin:0 auto;
}
.sec-title .sec-title_item {
	padding: 10px;
	display: flex;
	flex-direction: column;
}
.sec-title .item-a { 
	grid-area: item-a;
	align-items:center;
}
.sec-title .item-a img { max-width: 500px }
.sec-title .item-b { 
	grid-area: item-b; 
	justify-content: flex-end;
}
.sec-title .item-c { 
	grid-area: item-c; 
	justify-content: flex-start;
}
@media (max-width: 768px) {
	.sec-title {
		grid-template-columns: 1fr;
		grid-template-areas:
		"item-b"
		"item-a"
		"item-c";
	}
	.sec-title h2 { text-align:center; }
	.sec-title_item { align-items:center; }
	.sec-title .item-a img { width:100%; }
	.sec-title .item-c p {
		text-align:center;
		padding:0 0.5rem;
	}
}

/* 社員紹介 */
.member {
	display: grid;
	gap: 20px;
	padding: 20px;
	max-width:1900px;
	margin:0 auto;
}
.member-item img {
	width: 100%;
	height: auto;
	display: block;
}
@media (min-width: 1025px) {
	.member { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.member { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.member { grid-template-columns: 1fr; }
}

.work {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width:100%;
	max-width:1200px;
	margin:0 auto 4rem;
}
.work .work-item {
	width:50%;
	margin:0 auto 4rem;
	text-align:center;
}
.work p {
	text-align:center;
	margin:0 auto;
}
@media (max-width: 768px) {
	.work .work-item { width:48%; }
	.work .work-item img { width:100%; }
}
@media (max-width: 480px) {
	.work {
		flex-direction: column;
		margin-bottom: 0;
	}
	.work .work-item {
		width: 100%;
		text-align: center;
		padding:1rem;
		margin-bottom:0.5rem;
	}
	.work .work-item img { width:100%; }
}

/* 比較表 */
.comp-table-ttl {
	margin-top:4rem;
	padding:1rem 0.3rem;
	text-align:center;
}
.comp-table-ttl span{
	display: inline;
	background: linear-gradient(transparent 50%, #ffee79 50%);
	padding:0 15px;
}
.comp-table { overflow-x: auto; }
.comp-table img {
	margin:0 auto;
	text-align:center;
	display: block;
}
.comp-table p { text-align: center; }
@media (max-width: 1024px) {
	.comp-table img {
		width: 900px;
		margin:1rem auto;
	}
}
@media (max-width: 480px) {
	.comp-table-ttl { font-size:1.5rem; }
	.comp-table-ttl span{ padding:0 5px; }
	.comp-table img {
		display: block;
		margin: 0 auto;
		width: 650px;
		max-width: none;
	}
}

.benefit-ttl {
	text-align:center;
	font-weight:700;
}
.benefit-ttl-bubble {
	position: relative;
	padding: 1.5rem 2rem;
	color: #fff;
	border-radius: 50px;
	background: #00b1bb;
	max-width: 360px;
	margin: 0 auto;
	text-align: center;
	font-weight: 700;
	font-size: 1.8rem
}
.benefit-ttl-bubble::after {
	position: absolute;
	bottom: -9px;
	left: 50%;
	width: 0;
	height: 0;
	content: '';
	border-width: 15px 20px 0 20px;
	border-style: solid;
	border-color: #00b1bb transparent transparent transparent;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
}
.benefit {
	display: flex;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto 4rem;
}
.benefit div {
	width: 24%;
	padding: 1%;
	margin: 0 auto;
}
.benefit div img {
	width: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.benefit div p {
	text-align: center;
	font-weight: 700;
}
@media (max-width: 768px) {
	.benefit-ttl-bubble {
		max-width: 280px;
		font-size: 1.2rem;
		padding: 1rem;
	}
	.benefit {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		max-width: 768px;
		margin: 0 auto 4rem;
	}
	.benefit div {
		width: 44%;
		padding: 2% 6%;
		margin: 0 auto;
	}
	.benefit div p {
		text-align: center;
		font-weight: 100;
		font-size: 1rem;
	}
}
@media (max-width: 480px) {
	.benefit div {
		width: 49%;
		padding: 1%;
		margin: 0 auto;
	}
}

.copy-price {
	height: 500px; 
	width:100%;
	background-image: url(../images/bg_copy-price.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	margin: 0 auto 4rem;
	text-align: center;
}
.copy-price h2 {
	position: absolute;
	top: 30%;
	left: 5%;
	margin: auto;
	color:#fff;
	padding:1rem;
	text-align:left;
	font-size:3.2rem;
	color:#2c2c2c;
}
.highlight-w {
	display: inline-block;
	background-color: white;
	padding: 5px 15px 1px;
	margin-bottom: 15px;
}
@media (max-width: 768px) {
	.copy-price {
		height: 330px; 
		width:100%;
		background-image: url(../images/bg_copy-price_sp.jpg);
		position: relative;
	}
	.copy-price h2 {
		font-size:2.2rem;
		top: 50%;
		left: 2%;
		transform: translate(-2%, -50%);
	}
}
@media (max-width: 480px) {
	.copy-price {
		height: 240px; 
		/*width:100%;
		background-image: url(../images/bg_copy-price_sp.jpg);
		position: relative;*/
	}
	.copy-price h2 {
		font-size:1.35rem;
		/*top: 50%;
		left: 2%;
		transform: translate(-2%, -50%);*/
	}
	/*.highlight-w { padding:5px 5px 1px 10px; }*/
}

.reason {
	width:100%;
	max-width:1200px;
	height:450px;
	margin:0 auto 4rem;
	position: relative;
}
.reason .reason-img {
	position: absolute;
	top: 0;
	left: 0;
}
.reason .reason-desc {
	background-color:#fff;
	width: 600px;
	padding:1rem 2rem;
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
.reason h3 {
	margin:1rem 0 0;
	font-size:2.4rem;
}
.reason p { margin-top:0; }

@media (max-width: 768px) {
	.reason { margin-bottom:5rem; }
	.reason .reason-desc {
		background-color:#fff;
		width: 600px;
		padding:5px 16px;
		position: absolute;
		top: 50%;
		right: 1%;
		transform: translate(-1%, 50%);
	}
	.reason h3 { font-size:1.8rem; }
}

@media (max-width: 480px) {
	.reason {
		width:100%;
		max-width:100%;
		height:400px;
		margin:0 auto 2rem;
		position: relative;
	}
	.reason h3 { font-size:1.4rem; }
	.reason .reason-img {
		position: absolute;
		top: 0;
		left: 0;
	}
	.reason .reason-img img { width:95%; }
	.reason .reason-desc {
		background-color:#fff;
		width: 90%;
		padding:5px 16px;
		position: absolute;
		top: 35%;
		right: 50%;
		transform: translate(50%, 35%);
	}
}

.service {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width:100%;
	max-width:1200px;
	margin:0 auto 4rem;
}
.service .service-card {
	width:31%;
	padding:0;
	text-align:center;
	border:1px solid #d9d9d9;
	margin-bottom:2rem;
}
.service .service-card .service-item { position: relative; }
.service .service-card .service-item img { width:100%; }
.service .service-card .service-item p {
	position: absolute;
	top: 10px;
	left: 10px;
	margin: 0;
	color: #fff;
	font-size: 15px;
	font-weight:700;
	line-height: 1;
	padding:10px;
}
.service .service-card .service-item .hikidemono-card { background: #F29C9F; }
.service .service-card .service-item .home-shipping { background: #A0D8EF; }
.service .service-card .service-item .all { background: #F08300; }
.service .service-card h3 {
	margin-bottom:0;
	line-height:1.2;
	font-size:1.4rem;
	letter-spacing:.5px;
}
.service-exp { padding:1rem; }

@media (max-width: 768px) {
	.service {
		width:98%;
		margin-bottom:0rem;
	}
	.service .service-card {
		width:49%;
	}
	.service .service-card h3 { font-size:0.9rem; }
	.service .service-card .service-item p { font-size:12px; }
	.service-exp {
		font-size:14px;
		padding:0.5rem;
	}
}

.company-head {
	height: 300px; 
	width:100%;
	background-image: url(../images/bg-company.png);
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	margin: 0 auto 2rem;
	text-align: center;
}
.company-head h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: auto;
	color:#333;
	font-size:4rem;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.company h3 {
	letter-spacing:2px;
}
.company h3::before {
	content: attr(data-en);
	display: block;
	color: #00b1bb;
	font-size: 18px;
}
.company h3::after {
	content: '';
	display: block;
	width: 40px;
	height: 2px;
	background-color: #00b1bb;
}

.company {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width:100%;
	max-width:1400px;
	margin:0 auto;
}
.company .overview {
	width:46%;
	padding:0 4% 0 0;
}
.company .overview table {
	border-collapse: collapse;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}
.company .overview table th, .company .overview table td {
	border: 2px solid #fff;
	background-color: #e5f9fa;
	padding: 1em;
}
.company .overview table th {
	background-color: #00b1bb;
	color: #fff;
	font-weight: bold;
	text-align: center;
	width: 20%;
	min-width: 4em;
}
.company .overview table ul {margin:0;padding-left:20px;}
.company .overview table img { margin-bottom:10px; }
.company .history {
	width:50%;
	padding:0;
}
.company .history table { width: 100%; }
.company .history table th{
	position: relative;
	text-align: left;
	width: 20%;
	font-size:18px;
}
.company .history table th:after{
	display: block;
	content: "";
	width: 10px;
	height: 2px;
	background-color: #333;
	position: absolute;
	top:calc(50% - 1px);
	right:0;
}
.company .history table td{
	text-align: left;
	width: 85%;
	padding: 1em;
}
@media (max-width: 768px) {
	.company-head {
		height: 200px;
		width:100%;
	}
	.company-head h2 {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: auto;
		color:#333;
		font-size:2.4rem;
	    transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}
	.company {
		display:flex;
		flex-direction: column;
	}
	.company .overview,.company .history {
		width:96%;
		padding:0;
		margin:0 auto;
	}
	.company .overview table th {
		width: 30%;
	}
	.company .history table{vertical-align: top;}
	.company .history table th {
		width:32%;
		padding-left:0.2rem;
		vertical-align: top;

	}
	.company .history table td {
		width:68%;
		font-size:0.9rem;
	}
}
.history-list { position: relative; }
.history-bar {
	position: absolute;
	left: 4px;
	top: -15px;
	height: calc(100% + 15px);
}
.history-bar-line {
	display: block;
	background-color: #d9d9d9;
	border-radius: 0.25rem;
	height: 100%;
}
.history-bar-dot {
	width: 10px;
	height: 42px;
}
.history-bar-dot span {
	display: block;
	border-radius: 50%;
	background-color: #efefef;
	width: 10px;
	height: 10px;
}
.history-bar-dot span:not(:last-child) {
	margin: 0 0 0.375rem;
	background:#d9d9d9;
}
.history-item { margin: 0 0 2.2rem; }
.history-item-date {
	display: flex;
	align-items: flex-start;
}
.history-item-circle {
	position: relative;
	width: 1rem;
	height: 1rem;
	border: 3px solid #00b1bb;
	border-radius: 50%;
	background-color: #fff;
	z-index: 1;
}
.history-item-number {
	position: relative;
	text-align: center;
	margin: 0 0 0 1.8rem;
	width: 100px;
	padding: 5px;
	color: #fff;
	background-color: #00b1bb;
	font-size: 1rem;
	font-weight: 700;
}
.history-item-number::before {
	display: block;
	position: absolute;
	top: 49%;
	right: 100%;
	content: "";
	width: 1.8rem;
	border-top: 3px dashed #d9d9d9;
}
.history-item-year {
	display: flex;
	align-items: center;
}
.history-item-con {
	padding: 0 0 0 2.1rem;
	list-style: none;
}
.history-item-con li:not(:last-child) { margin: 0 0 1.75rem; }
.history-item-con dl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid #f0f0f0;
	padding: 0 0 0.8rem;
}
.history-item-con dt, .history-item-con dd {
	font-size: 1rem;
}
.history-item-con dt {
	width:20%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.history-item-con dd {
	width:80%;
	margin:0;
}

.contact {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width:100%;
	max-width:1200px;
	margin:0 auto 4rem;
}
.contact .contact-txt { width:55%; }
.contact .contact-img {
	width: 45%;
	margin-top: 2rem;
}
.contact .contact-img img { width:100%; }
.contact .txt-ig {
	padding-left: 60px;
	line-height: 30px;
	background: url(../images/Instagram_Glyph_Gradient.svg) no-repeat;
	background-size:auto 40px;
	background-position:0 50%;
}
.contact .txt-chat {
	padding-left: 60px;
	line-height: 30px;
	background: url(../images/icon-chat.svg) no-repeat;
	background-size:auto 40px;
	background-position:0 50%;
}
@media (max-width: 768px) {
	.contact { width:95%; }
	.contact .contact-txt h2 { margin-bottom:0; }
	.contact .contact-txt p {
		padding-top: 0;
		margin-top: 0;
	}
	.contact .contact-txt { width: 53%; }
	.contact .contact-img {
		width: 47%;
		margin-top:10rem;
	}
}
@media (max-width: 480px) {
	.contact { flex-direction: column; }
	.contact h2 {
		margin: 0 auto;
		text-align: center;
	}
	.contact .contact-txt,.contact .contact-img {
		width: 100%;
		padding: 1rem;
	}
	.contact .txt-ig,.contact .txt-chat { font-size: 1.125rem; }
	.contact .contact-img img { width:100%; }
	.contact .contact-txt { padding-bottom: 0; }
	.contact .contact-img { display:none; }
}

.type-head {
	height: 300px; 
	width:100%;
	background-image: url(../images/bg_minigift.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	margin: 0 auto 4rem;
	text-align: center;
}
.type-head h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: auto;
	color:#333;
	font-size:4rem;
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.type {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width:100%;
	max-width:1400px;
	margin:0 auto;
}
.type h3 {
	margin-bottom:0;
	font-size:2rem;
}
.type-card {
	width:30%;
	padding:0;
	text-align:center;
	border:1px solid #d9d9d9;
}
.type img { width:100%; }
.type-exp {
	padding:1rem 1.5rem;
	text-align:center;
}
.type_btn {
	display: inline-block;
	width: 100%;
	max-width: 280px;
	position: relative;
	background: #00b1bb;
	padding: 1.4em 1em;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	text-align: center;
	transition-duration: 0.3s;
	margin-bottom:2rem;
}
.type_btn:before {
	content: '';
	width: 10px;
	height: 10px;
	border: 0;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	left: 30px;
	margin-top: -6px;
}
.type_btn:hover {
	background: #00939B;
	color: #fff;
	text-decoration:none;
}
@media (max-width: 768px) {
	.type-head { height:250px; }
	.type-head h2 { font-size: 2.2rem; }
	.type-card { width:32%; }
	.type h3 { font-size:1.5rem; }
	.type-exp { padding:1rem 0.5rem; }
	.type_btn:before { left:10px; }
}
@media (max-width: 480px) {
	.type-head {
		height: 200px;
		width:100%;
	}
	.type-head h2 {
		position: absolute;
		top: 50%;
		left: 50%;
		width:100%;
		margin: auto;
		color:#333;
		font-size:2.4rem;
	    transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}
	.type { flex-direction: column; }
	.type-card {
		width:96%;
		margin:0 auto 2rem;
	}
	.type h3 { margin-bottom:0; }
	.type-exp { padding: 1rem; }
}

/* 背景 */
.c-white { color:#fff; }
.bg-mintgreen { background:#00b1bb; }
.bg-ancie-color { background:#e5f9fa; }
.bg-light-gray { background:#fafafa; }

/* 余白設定 */
.mb0 { margin-bottom:0!important; }
.mt0 { margin-top:0!important; }
.pb0 { padding-bottom:0!important; }
.pt0 { padding-top:0!important; }

/* 表示設定 */
.pcview { }
.spview { display: none; }
 
@media screen and (max-width: 768px) {
	.pcview { display: none; }
	.spview { display: block; }
}

/* footer */
.l-footer {
	background-color: #00b1bb;
	margin-top:4rem;
}
.l-footerGift {
	padding-top: 4rem;
	padding-bottom: 100px;
}
.c-container { max-width:1400px!important; }
.u-d-f { display: flex !important; }
.u-gap-4 { gap: 4rem; }


.c-btn:not(.-primary):not(.-secondary):not(.-danger):not(.-flat) { border: 1px solid #e0e0e0; }
.-with-arrow.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.-rounded-full.c-btn {
	border-radius:1000px;
	padding-right: 1rem;
	padding-left: 1rem;
	width: 100%;
	margin-bottom: 2rem;
}
.c-btn {
	display: inline-block;
	position: relative;
	transition: 0.3s ease-out;
	outline: 0;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	box-shadow: none;
	background-color: #fff;
	cursor: pointer;
	padding: 1.2rem 3rem;
	min-height: 4.4rem;
	text-align: center;
	text-decoration: none;
	line-height: 2.4rem;
	color: #666;
	font-size: 1.6rem;
}
.-with-arrow.c-btn::after {
	content: "";
	display: inline-block;
	width: 27px;
	height: 6px;
	margin-left: 10px;
	background-image: url(https://assets.ancie.jp/assets/common/arrow-forward-half-brand-12a2726c4f72e3bea25e9e986d2540c05bb0ecaade409e200fc16249ba8c3f42.svg);
}
.c-btn:hover {
	text-decoration:none;
	background-color: #e6e6e6;
}

.u-text-serif {
	font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
	font-size:1rem;
	line-height:1.2;
}
.u-fz-24 {
	font-size: 1.6rem !important;
	line-height:1.6;
}
.l-footerGiftSections {
	margin-top: 4rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}
.l-footerCategory {
	display: flex;
	flex-wrap: wrap;
	width:100%;
	margin-top:1rem;
}
.l-footerCategory .l-footerCategory__left { width: 60%; }
.l-footerCategory .l-footerCategory__right { width: 40%; }

.l-footerService {
	display: flex;
	flex-wrap: wrap;
	width:100%;
	margin-top:1rem;
}
.l-footerService .l-footerService__left { width: 50%; }
.l-footerService .l-footerService__right { width: 50%; }
.l-footerGiftSection { color: #fff: }
.l-footerGiftSection a { color:#fff; }
.l-footerGiftSection__title {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
	border-bottom: 1px solid #fff;
	padding-bottom: 10px;
	color:#fff;
}
.l-footerGiftSection__titleLeft { font-size: 30px; }
.l-footerGiftSection__titleRight { font-size: 18px; }
.l-footerGiftSection__links a {
	display: block;
	padding: 10px 0;
}
.l-footerCommon {
	background-color: #0098a4;
	padding-top: 60px;
	padding-bottom: 20px;
}
.l-footerCommon a { color:#fff; }
.l-footerCommon__logo {
	width: 370px;
	display: block;
	margin: auto;
}
.u-jc-c { justify-content: center !important; }
.u-d-f { display: flex !important; }
.u-fw-w { flex-wrap: wrap; }
.u-gap-3 { gap: 3rem; }

.u-mt-4, .u-my-4 { margin-top: 2rem !important; }
.u-ai-c { align-items: center !important; }
.u-jc-c { justify-content: center !important; }
.u-d-f { display: flex !important; }
.l-footerCommon_buttons {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	margin: 40px 0;
}
.l-footerCommonButton {
	height: 90px;
	border: 1px solid #fff;
	border-radius: 1000px;
	padding: 10px 30px 10px 10px;
	display: flex;
	align-items: center;
	gap: 40px;
	color: #fff;
}
.l-footerCommonButton img {
	width: 70px;
	height: 70px;
	border-radius: 100%;
}
.l-footerCommonButton:hover {
	color: #666;
	background:#fff;
	text-decoration:none;
	opacity: 0.8
}
.l-common-footer {
	padding-top: 4rem;
	background-color: #0098A0;
	padding-bottom: 4rem;
}
.l-common-footer__company-info {
	width: 80%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.l-common-footer__summary,.l-common-footer__policies {
	width: 100%;
	display: flex;
	justify-content: space-around;
	margin-top: 1rem;
}
.l-common-footer__summary a,.l-common-footer__policies a {
	color: #fff;
	font-size: 16px;
}
.l-common-footer__summary {
	width: 100%;
	margin-bottom: 2rem;
}
.l-common-footer__summary a:hover { text-decoration: underline; }
.l-common-footer__policies {
	width: 60%;
	flex-wrap: wrap;
	justify-content: space-between;
}
.l-common-footer__policies a:hover { text-decoration: underline; }
.l-common-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around
}
.l-common-footer__linkbox {
	width: 45%;
	display: flex;
	margin-bottom: 3rem;
}
.l-common-footer__linkbox .image { width: 40%; }
.l-common-footer__linkbox .image img {
	aspect-ratio: 1.25;
	width: 100%;
}
.l-common-footer__linkbox .text {
	width: 60%;
	background-color: #FFFFFF;
	color: black;
	display: flex;
	justify-content: center;
	align-items: center;
}
.l-common-footer .hl {
	border: 1px solid white;
	width: 95%;
	height: 1px;
	margin: 0 auto;
}
.l-common-footer__footer-bottom {
	display: flex;
	margin: 0 2rem;
	justify-content: space-between;
}
.l-common-footer__copyright {
	width: 40%;
	color: #fff;
	font-size: 16px;
	margin-top: 1rem;
	text-align: right;
}
.u-link-white { font-size:1.125rem; }
.u-text-white {
	text-align:center;
	margin-top:1rem;
	font-size:1rem;
	color:#fff;
}
@media (max-width: 480px) {
	.u-gap-4 { gap: 0.5rem 2.5rem; }
	.u-link-white { font-size:0.9rem; }
}

@media (max-width: 599px) {
	.u-flex-mobile-column { flex-direction: column !important; }
	.l-footerGiftSection__links { grid-template-columns:repeat(1, minmax(0, 1fr)); }
	.l-footerCommonButton {
		height:60px;
		padding: 5px 10px 5px 5px;
		gap: 10px;
		font-size:0.8rem;
	}
	.l-footerCommonButton img {
		width:50px;
		height: 50px;
	}
}
@media (min-width: 600px) {
	.u-gap-4 { gap: 2rem; }
	.u-gap-3 { gap: 3rem; }
}
@media (max-width: 959px) {
	.l-footerGiftSections { grid-template-columns:repeat(1, minmax(0, 1fr)); }
	.l-footerCommon_buttons {
		gap:10px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.l-common-footer__policies { width:100%; }
	.l-common-footer__links { margin-top:3rem; }
	.l-common-footer__linkbox { flex-direction:column; }
	.l-common-footer__linkbox .image { width:100%; }
	.l-common-footer__linkbox .image img {
		aspect-ratio:1.65;
		width: 100%;
	}
	.l-common-footer__linkbox .text {
		padding:1rem;
		width: 100%;
	}
	.l-common-footer__footer-bottom { flex-direction:column; }
	.l-common-footer__copyright {
		width:100%;
		text-align: left;
	}
}
@media (max-width: 1024px) {
	.l-footerCategory .l-footerCategory__left { width: 72%; }
	.l-footerCategory .l-footerCategory__right { width: 28%; }
	.l-footerCommonButton {
		gap:5px;
		padding-right:0;
	}
	.l-footerService { flex-direction: column; }
	.l-footerService .l-footerService__left,.l-footerService .l-footerService__right { width: 100%; }
}
@media (min-width: 1200px) {
	.l-footerGiftSection__links a { font-size:1rem; }
}
@media (max-width: 767px) {
	.l-footerCategory { flex-direction: column; }
	.l-footerCategory .l-footerCategory__left,.l-footerCategory .l-footerCategory__right { width: 100%; }
}