@charset "utf-8";
@import url(./default.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #333333;
    font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif
}
:root {
    --contents_width:1366px;
    --footer_height:3rem;
}
.container {
    width: 100%;
    min-height: calc(100vh - var(--footer_height));
    padding-bottom: 2rem !important;
    overflow: hidden;
}
table {
    border-collapse: collapse;
}
th,
td {
    padding: 0.5em 0;
    border: 1px solid #333;
}
img {
    width: 100%;
    height: auto;
}
.flex_wrap {
    display: flex;
    flex-wrap: wrap;
}
.flex_nowrap {
    display: flex;
    flex-wrap: nowrap;
}
.flex_column {
    display: flex;
    flex-direction: column;
}
.align_items_center {
    align-items: center;
}
.justify_content_center {
    justify-content: center;
}
.justify_content_between {
    justify-content: space-between;
}
.line_height_2 {
    line-height: 2em;
}
header {
    border-bottom: 1px solid #aaa;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.header_container {
    display: flex;
    align-items: center;
    width: min(var(--contents_width),100%);
    margin: auto;
    padding-left: 1rem;
}
.assist_logo {
    width: min(400px,80%);
}
.tab {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: min(var(--contents_width),100%);
    margin: auto;
}
.tab_middle {
    display: flex;
    flex-wrap: nowrap;
    position: relative;;
}
.tab_item {
    font-size: clamp(0.9rem,4vw,1rem);
    font-weight: bold;
    color: #333 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12em;
    padding-top: 1em;
    padding-bottom: 1em;
    text-decoration: none;
}
.tab_item.active {
    border-bottom: 5px solid red;
}
.tab_item.link:hover{
    border-bottom: 5px solid red;
    box-shadow: -4px 0 4px 0 #ccc, 4px 0 4px 0 #ccc;
}
.menu {
    display: flex;
    align-items: center;
    width: min(var(--contents_width),100%);
    margin: auto;
}
.menu_item {
    font-size: clamp(0.6rem,2.5vw,1rem);
    padding: 0 1em;
    width: fit-content;
    border-right: 1px solid #333;
}
.menu_item:last-child {
    border-right: none;
}
.menu_item a {
    color: #333333 !important;
    text-decoration: none;
}
.menu_item a:hover {
    font-weight: bold;
    text-decoration: underline;
}
.notice {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: clamp(1.2rem,4vw,1.5em);
    /* color: red; */
    font-weight: bold;
    /* アニメーションを設定 */
    /* animation: image_anime1 20s infinite;  */
    
}
.notice span,
.notice span ul li {
    color: red;
    /* animation: image_anime1 20s infinite; */
    /* -webkit-text-stroke: 1px white; */
    text-shadow:
    2px 2px 0 #fff,
    -2px 2px 0 #fff,
    -2px -2px 0 #fff,
    2px -2px 0 #fff;
}
.main_area {
    background-image:   url(../img/background_pattern.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 300px;

    /* アニメーションを設定 */
    /* animation: image_anime2 10s ease infinite;  */
    /* forwardsを設定すると100%の状態で止まる */
    /* animation-fill-mode: forwards;  */
    position: relative;
}
@keyframes image_anime1 {
    0% {
        color: #f00;
    }
    25% {
        color: #f00;
    }
    50% {
        color: #333333;
    }
    75% {
        color: #f00;
    }
    100% {
        color: #f00;
        
    }
}
@keyframes image_anime2 {
    0% {
        /* 切り替え後の画像 */
        background-image:   url(../img/background_pattern1.png); 
    }
    45% {
        /* 切り替え後の画像 */
        background-image:   url(../img/background_pattern1.png); 
    }
    50% {
        /* 切り替え後の画像 */
        background-image:   url(../img/background_pattern2.png); 
    }
    90% {
        /* 切り替え後の画像 */
        background-image:   url(../img/background_pattern2.png); 
    }
    100% {
        background-image:   url(../img/background_pattern1.png); 
    }
}

.slider_item {
    padding: 0 1.5em;
}
.slider_img {
    border: 1px solid #ccc;
}
footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--footer_height);
    background-color: #4d80dd;
    margin:auto;
}
.copyright {
    font-size: 1rem;
    color: #fff !important;
    width: fit-content;
}
/* デザインページ用　ここから */
.contents {
    width: min(var(--contents_width), 100%);
    margin: auto;
}
.category_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 95%;
    margin: auto;
}
.category_title {
    font-size: 1.5rem;
    font-weight: bold;
    width: fit-content;
    height: 3rem;
    position: relative;
}
.category_title::after {
    content: "";
    position: absolute;
    width: 30%;
    height: 5px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background-color: #f00 !important;
}
.category_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
    gap: 1rem;
}
.category_item {
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.category_item.newYear,
.category_item.mourning {
    width: min(150px, calc(25% - 1rem));
}
.category_img {
    width: 100%;
    border: 1px solid #ccc;
}
.category {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3em;
    font-size: clamp(0.85rem, 3.5vw, 1rem);
    font-weight: bold;
    border: 1px solid #333;
    cursor: pointer;
}
.category.newYear.active {
    color: #fff !important;
    background-color: #f00 !important;
}
.category.newYear:hover {
    color: #fff !important;
    background-color: #f00 !important;
}
.category.mourning.active {
    color: #fff !important;
    background-color: #00f;
}
.category.mourning:hover {
    color: #fff !important;
    background-color: #00f;
}
.design_list_title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.5em;
    color: #fff !important;
    background-color: #458f6b;
}
.heading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: auto;
}
.heading_container {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 1rem;
}
.category_name {
    font-size: 1.5rem;
    font-weight: bold;
    padding-left: 1em;
    width: 100%;
}
.category_name.newYear.active {
    border-left: 8px solid #f00;
}
.category_name.mourning.active {
    border-left: 8px solid #00f;
}
.category_text {
    width: 100%;
}
/* はがきレイアウト　ここから */
.postcards {
	display: flex;
	flex-wrap: wrap;
	margin: 1.25rem auto 0;
	width: min(var(--contents_width),85%);
	height: auto;
	gap: 1rem;
}
.postcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(calc(calc(var(--contents_width) - 4rem) / 5), calc(calc(100% - 4rem) / 5));
    position: relative;
}
.postcardNum {
	width: fit-content;
	/* color: red !important; */
	font-size: clamp(0.75rem,1.25vw, 1rem);
	/* font-size: clamp(1rem,2vw,1.4rem); */
	font-weight: bold;
	line-height: 1;
    margin-bottom: 0.25em;
}
.postcardNum.wide {
    position: absolute;
	top: 15%;
    left: 50%;
    transform: translateX(-50%);
}
/* .postcardNum span {
    font-weight: normal;
} */
.postcardImg {
	width: 100%;
	padding: 0 10%;
	display: flex;
	flex-direction: column;
	position: relative;
	text-align: center;
}
.postcardImg.wide {
	padding: 0;
	margin-top: 35%;
	
}
.postcardImg img {
	width: 100%;
	border: 1px solid #333;
}
.fig {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	cursor: pointer;
}
.fig .click {
	font-size: 1.5rem;
	font-weight: bold;
}
.postcardImg img:hover {
	transition: all 0.3s;
	transform: scale(1.1);
}
.fig:hover {
	opacity: 1;
}
.postcardName {
    color: #333;
	font-size: clamp(0.75rem,1.25vw, 1rem);
    text-decoration: none;
}
.postcardName:hover {
    font-weight: bold;
    color: orange;
}
.monochrome {
	display: inline-block;
	position: absolute;
	width: 4.8rem;
	font-size: 0.8rem;
	top: 0;
	left: 50%;
	transform: translate(-50% ,0);
	/* right: 10%; */
	color: #fff !important;
	background-color: #595959 !important;
	border-radius: 5px;

}
.supplement {
	align-self: flex-start;
	margin-left: calc(clamp(0.75rem,1.25vw, 1rem) * 1.5);
}
.supplement p {
	font-size: clamp(0.75rem,1.25vw, 1rem);
}
/* はがきレイアウト　ここまで */
/* モーダル対応　ここから */
.modal {
    align-items: center;
    justify-content: center;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.8);
	display: none;
}
.postcard_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 1em;
}
.button_area {
    display: flex;
    justify-content: center;
    gap: 1em;
}
.button_area button {
	color: #333333 !important;
	font-size: 1rem;
	font-weight: bold;
	padding: 0.5em 1em;
	background-color: #eee;
	border-radius: 10px;
    transition: all 0.3s ease;
	z-index: 100;
	cursor: pointer;
    border: none;
}
.button_area button:hover {
	color: #fff !important;
	background-color: #aaa;
}
/* 2026年　改良　ここから */
.how_to_order {
    display: block;
    width: fit-content;
	color: #333333 !important;
	font-size: 1rem;
	font-weight: bold;
	padding: 0.5em 1em;
	background-color: #eee;
	border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
	z-index: 100;
}
.how_to_order:hover {
	color: #fff !important;
	background-color: #aaa;
}
.banner {
    display: block;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding-top: 0.5em;
    font-size: clamp(1rem, 2.75vw, 1.5rem);
    font-weight: bold;
    width: clamp(150px, 25vw, 250px);
    aspect-ratio: 3 / 2;
    /* aspect-ratio: 30 / 25; */
    position: absolute;
    bottom: -5rem;
    left: 6%;
    transform: scale(0);
    /* border-radius: 999px;
    background-size: contain;
    background-color: red;
    border: 2px solid red; */
    transition: all 0.3s ease-out;
    animation: fade_in 1s 1s ease-in forwards,
                banner_move 2s 1s infinite;
    /* span{
        color: #fff;
    } */
}
.banner img {
    width: 100%;
}
/* .banner:hover {
    background-color: #fffdca;
}
.banner:hover span {
    color: red;
} */
@keyframes fade_in {
    100% {
        transform: scale(1);
    }
}
@keyframes banner_move {
    50% {
        bottom: -4rem;
    }
    100% {
        bottom: -5rem;
    }
} 
/* 2026年　改良　ここまで */
.modalPostcard {
	display: flex;
	flex-direction: column;
	width: max(25%,350px);
	border-radius: 5px;
	object-fit: cover;
}
.modalPostcard.wide {
	width: max(45%,600px);
}
.modalPostcard p {
	font-size: 1.5rem;
	color: #fff !important;
	align-self: center;
}
/* モーダル対応　ここまで */
/* デザインページ用　ここまで */
/* ご利用ガイドメニュー　ここから */
.guide_menu {
    display: flex;
    flex-direction: column;
    width: min(var(--contents_width), 100%);
    margin: 0 auto;
    padding: 0 1rem;
    gap: 0.5em;
}
.guide_title {
    width: fit-content;
    font-weight: bold;
    position: relative;
    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(transparent 80%, #f00 0);
    }
}
/* .guide_title::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(transparent 80%, #f00 0);
} */
.menu_list {
    display: flex;
    align-items: center;
    gap: 1em;
    a {
        color: #00f;
    }
    a:hover {
        font-weight: bold;
    }

}
/* ご利用ガイドメニュー　ここまで */
/* パンくずリスト設定　ここから */
.breadcrumb {
    display: none;
    width: min(var(--contents_width), 100%);
    margin: 0 auto;
    padding: 0 1rem 1rem;
    line-height: 1;
}
.breadcrumb li {
    display: inline;
    list-style: none;
}
.breadcrumb a {
    text-decoration: none;
    color:#00f;
}
.breadcrumb li:not(:last-child)::after {
    content: " > ";
}
.breadcrumb a:hover {
    text-decoration: underline;
    font-weight: bold;
}
.breadcrumb span {
    margin: 0 0.5rem;
}
/* パンくずリスト設定　ここまで */
/* トップへ戻る指定 ここから */
.pageTop {
    --circle_size:80px;
    position: fixed;
    bottom: 3rem;
    right: 1rem;
    width: var(--circle_size);
    height: var(--circle_size);
    opacity: 0;
    transition: 0.5s all;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pageTop.active {
    opacity: 1;
}
.circle_area {
    position: relative;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #3861ad;
}
.circle_area.mourning {
    background-color: #00f;
}
.array {
    width: 40%;
    height: 40%;
    border-style: solid;
    border-color: #fff !important;
    border-width: 8px 8px 0px 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-30%) rotate(-45deg);
}
/* トップへ戻る指定 ここまで */
    @media (max-width:800px) {
        .tab {
            justify-content: center;
        }
        .menu {
            justify-content: center;
        }
        .heading_container {
            width: 70%;
        }
        /* はがきレイアウト　ここから */
		.postcards {
			gap: 1rem 5%;
		}
		.postcard {
			width: 30%;
		}
		.postcardName {
			font-size: clamp(0.75rem,1.75vw, 1rem);
		}
		/* はがきレイアウト　ここまで */
		/* モーダル対応　ここから */
		@media (max-width: 768px) {
			/* .modalPostcard {
				width: 40%;
			} */
			.modalPostcard.wide {
				width: 90%;
			}
            /* .modal button {
                right: 25vw;
            } */
            
		}
		/* モーダル対応　ここまで */
    }
        @media (max-width:600px) {
            .main_area {
                width: 100%;
            }
            .category_item.mourning {
                width: min(220px, calc(50% - 1rem));
            }
            .heading_container {
                width: 90%;
            }
            /* はがきレイアウト　ここから */
			.postcard {
				width: 47.5%;
			}
			/* はがきレイアウト　ここまで */
		    /* モーダル対応　ここから */
            .modal button {
                right: 25vw;
            }
            /* モーダル対応　ここまで */
            /* ご利用ガイドメニュー　ここから */
            .guide_menu {
                display: none;
            }
            /* ご利用ガイドメニュー　ここまで */
            /* パンくずリスト設定　ここから */
            .breadcrumb {
                display: block;
            }
            /* パンくずリスト設定　ここまで */
		}
        @media (max-width:480px) {
                .main_area {
                    background-size: 1000px;
                }
                .category_item.newYear,
                .category_item.mourning {
                    width: min(150px, calc(40% - 1rem));
                }
                /* デザインページ用　ここから */
                /* モーダル対応　ここから */
                .modalPostcard {
                    width: 70%;
                }
                /* モーダル対応　ここまで */
                /* デザインページ用　ここまで */
            }