@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;
}
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 15s ease infinite;  */
    /* forwardsを設定すると100%の状態で止まる */
    /* animation-fill-mode: forwards;  */
    position: relative;
}
/* 2026/6/16変更　ここから */
.title_img {
    display: flex;
    width: 700px;
    margin: 0 auto;
    img {
        width: 100%;
    }
    @media (width < 750px) {
        width: 400px;
    }
    @media (width < 450px) {
        width: 80%;
    }
}
/* 2026/6/16変更　ここまで */
@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_pattern.png); 
    }
    45% {
        /* 切り替え後の画像 */
        background-image:   url(../img/background_pattern.png); 
    }
    50% {
        /* 切り替え後の画像 */
        background-image:   url(../img/background_pattern1.png); 
    }
    90% {
        /* 切り替え後の画像 */
        background-image:   url(../img/background_pattern1.png); 
    }
    100% {
        background-image:   url(../img/background_pattern.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%);
    /* background: url(../img/background_pattern.png) repeat-y; */
    margin: auto;
}
.contents.newYear {
    min-height: calc(100vh - 13rem);
}
.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_layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50vh;
    gap: 2em;
}
.category_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
    gap: 1rem;
}
.category_item {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    gap: 1em;
}
.category_item.newYear,
.category_item.mourning {
    /* width: min(150px, calc(25% - 1rem)); */
}
.category_img {
    width: 100%;
    border: 1px solid #ccc;
    cursor: pointer;
}
.category {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1.25em 1.5em 1em;
    min-width: 9em;
    line-height: 1;
    /* width: 100%; */
    /* height: 3em; */
    font-size: clamp(0.85rem, 3.5vw, 1.5rem);
    font-weight: bold;
    /* border: 1px solid #333; */
    box-shadow: 2px 2px 5px #00000060;
    color: #fff;
    /* text-shadow: 0.1em 0.1em 0.1em #000; */
    /* -webkit-text-stroke: 1px #000;
    paint-order: stroke fill; 縁を文字の内側ではなく外側にきれいに描画する */
    background-color: red;
    cursor: pointer;
    transition: all 0.3s ease;
}
.category.type1 {
    border-radius: 99999px;
}
.category.type2 {
    border-radius: 0.75em;
}
.category.type3 {
    border-radius: 0.5em;
}
.category.type4 {
    border-radius: 0.25em;
}

.category.newYear.active {
    color: #fff !important;
    background-color: #f00 !important;
}
.category.newYear:hover {
    /* color: #fff !important;
    background-color: #f00 !important; */
    scale: 1.1;
}
.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.5rem;
    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),calc(100% - 2em));
    margin: 0 auto;
	/* height: auto; */
	/* gap: 1rem; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(calc(var(--contents_width) - 6em) / 5) , 1fr));
    place-items: center;
    justify-content: center;
    padding: 1em;
    /* width: 100%; */
    gap: 1em;
}
.postcard {
	display: flex;
	flex-direction: column;
	align-items: center;
    width: 100%;
	/* 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: 22%;
    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 {
    scale: 1.2;
}
/* .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:1000px) {
        .tab {
            justify-content: center;
        }
        .menu {
            justify-content: center;
        }
        .heading_container {
            width: 70%;
        }
        /* はがきレイアウト　ここから */
		.postcards {
            grid-template-columns: repeat(auto-fit, minmax(175px , 1fr));
			/* 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%;
            }
            /* はがきレイアウト　ここから */
			.postcards {
                grid-template-columns: repeat(auto-fit, minmax(140px , 1fr));
				/* 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%;
                }
                /* モーダル対応　ここまで */
                /* デザインページ用　ここまで */
            }

/* 2026/07/22 slickスライダーの矢印ボタンの実装 */
/* Slick Slider Arrow Buttons */
.slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border: none;
    background-color: transparent;
    cursor: pointer;
    width: 50px;
    height: 50px;
}

.slick-prev {
    left: 10px;
}

.slick-next {
    right: 10px;
}

.slick-arrow::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: #000;
}

.slick-prev::before {
    transform: rotate(-135deg);
}

.slick-next::before {
    transform: rotate(45deg);
}
/* ここまで */

/* 変数の指定 */
:root {
    /* ボタン文字色 */
    --button_color: #000;
    /* ボタン文字色（hover時） */
    --button_color_hover: #fff;
    /* ボタン文字の大きさ */
    --button_font_size: clamp(0.85rem, 3.5vw, 1.5rem);
    /* ボタン文字幅 */
    --button_font_weight: bold;
    /* ボタン背景色 */
    --button_background: #fff;
    /* ボタン背景色（hover時） */
    --button_background_hover: #a50404;
    /* ボタン左右余白 */
    --button_padding_x: 1.5em;
    /* ボタン左余白 */
    --button_padding_x1: 1.5em;
    /* ボタン右余白 */
    --button_padding_x2: 1.5em;
    /* ボタン上下余白 */
    --button_padding_y: 1em;
    /* ボタン上余白 */
    --button_padding_y1: 1.25em;
    /* ボタン下余白 */
    --button_padding_y2: 1em;
    /* ボタンアニメーション時間 */
    --button_anime_time: 0.3s;
    /* 角丸サイズ */
    --button_rounded: 15px;
    /* ボタン枠線色 */
    --button_border_color: #a50404;
    /* ボタン枠線色ドロップシャドウ */
    --button_border_color_shadow: #a5040460;
    /* ボタン枠線（枠線を消す時は値に「none」を設定する） */
    --button_border: 1.5px solid var(--button_border_color);
}
.button {
	/* ディスプレイ指定（ブロック） */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 9em;
    /* 文字色指定（変数：ボタン文字色） */
    color: var(--button_color);
    /* 背景色指定（変数：ボタン背景色） */
    background-color: var(--button_background);
    /* フォントサイズ指定（変数：ボタン文字の大きさ） */
    font-size: var(--button_font_size);
    /* 文字幅指定（変数：ボタン文字幅） */
    font-weight: var(--button_font_weight);
    /* 内側余白指定（変数：ボタン上下余白、ボタン左右余白） */
    padding: var(--button_padding_y1) var(--button_padding_x) var(--button_padding_y2);
    /* 文字装飾指定（装飾無し） */
    text-decoration: none;
    /* 行の高さ指定（1行　※行間無し） */
    line-height: 1;
    /* アニメーション指定（1回タイプ）（変数：ボタンアニメーション時間） */
    transition: all var(--button_anime_time) ease;
    box-shadow: 3px 3px 5px var(--button_border_color_shadow);
    /* box-shadow: 3px 3px 5px #00000060; */
}
.button:hover {
    /* 文字色指定（変数：ボタン文字色（hover時）） */
    color: var(--button_color_hover);
    /* 背景色指定（変数：ボタン背景色（hover時）） */
    background-color: var(--button_background_hover);
}
.button.rectangle {
    /* 枠線指定（変数：ボタン枠線） */
    border: var(--button_border);
}
.button.rounded1 {
    /* 枠線指定（変数：ボタン枠線） */
    border: var(--button_border);
    /* 角丸指定（変数：角丸サイズ） */
    border-radius: var(--button_rounded);
}
.button.rounded2 {
    /* 枠線指定（変数：ボタン枠線） */
    border: var(--button_border);
    /* 角丸指定（半円にする時例） */
    border-radius: 9999px;
}
.button.diagonal1 {
    /* 枠線指定（変数：ボタン枠線） */
    border: var(--button_border);
    /* 傾斜指定（左30度） */
    transform: skew(-30deg);
}
.button.diagonal1 p {
    /* 傾斜指定（右30度） */
    transform: skew(30deg);
}
.button.diagonal2 {
    /* 枠線指定（変数：ボタン枠線） */
    border: var(--button_border);
    /* 傾斜指定（右30度） */
    transform: skew(30deg);
}
.button.diagonal2 p {
    /* 傾斜指定（左30度） */
    transform: skew(-30deg);
}
.button.threeD {
    /* 枠線指定（下） */
    border-bottom: 5px solid var(--button_border_color);
}
.button.threeD:hover {
    /* ①上部余白指定 */
    margin-top: 3px;
    /* ②下部枠線指定　上部余白分枠線を補足する */
    /* ①と②の指定でボタンが押されたように錯覚させる */
    border-bottom: 2px solid var(--button_border_color);
    /* 文字色指定（変数：ボタン文字色） */
    color: var(--button_color);
    /* 背景色指定（変数：ボタン背景色） */
    background-color: var(--button_background);
}
.button.special1,
.button.special2,
.button.special3,
.button.special4,
.button.special5 {
    /* 領域外を非表示にする指定 */
    overflow: hidden;
    /* 現在の位置から相対移動を指定できるモード　※単体では使用しないことが多い */
    position: relative;
}
/* ボタンアクション部分（左側） */
.button.special1::before,
.button.special2::before,
.button.special3::before,
.button.special4::before,
.button.special5::before {
    /* 疑似要素（before,afterなど）指定時の必須要素　※値を指定しない場合でも必用 */
    content: "";
    /* 絶対位置を指定する要素　※親要素がrelativeの場合、親要素に対する絶対位置 */
    position: absolute;
    /* 絶対位置指定（上） */
    top: 0;
    /* 絶対位置指定（左） */
    left: 0;
    /* 背景色指定（変数：ボタン背景色（hover時）） */
    background-color: var(--button_background_hover);
    /* アニメーション指定（1回タイプ）（変数：ボタンアニメーション時間） */
    transition: all 0.5s ease;
}
.button.special1::before {
    /* 幅 */
    width: 200%;
    /* 高さ */
    height: 200%;
    /* 初期位置の指定&45度回転させる */
    transform: translateX(-80%) translateY(-25%) rotate(45deg);
}
.button.special2::before {
    /* 幅 */
    width: 200%;
    /* 高さ */
    height: 200%;
    /* 初期位置の指定&-45度回転させる */
    transform: translateX(-80%) translateY(-25%) rotate(-45deg);
}
.button.special3::before {
    /* 幅 */
    width: 300%;
    /* 高さ */
    height: 300%;
    /* 要素の開始位置を上から50%に配置 */
    top: 50%;
    /* 縦横比が1:1の時は50%を指定すると円になる */
    border-radius: 50%;
    /* X軸(横)を左側に寄せ、Y軸(縦)は要素高さの半分上(-50%)することで上下中央配置にする */
    transform: translateX(-95%) translateY(-50%);
}
.button.special4::before {
    /* 幅 */
    width: 200%;
    /* 高さ */
    height: 200%;
    /* 初期位置の指定&45度回転させる */
    transform: translateX(-80%) translateY(-25%) rotate(45deg);
}
.button.special5::before {
    /* 幅 */
    width: 100%;
    /* 高さ */
    height: 100%;
    /* 初期位置の指定 */
    transform: translateX(-90%);
}
/* ボタンアクション部分（右側） */
.button.special4::after,
.button.special5::after {
    /* 疑似要素（before,afterなど）指定時の必須要素　※値を指定しない場合でも必用 */
    content: "";
    /* 絶対位置を指定する要素　※親要素がrelativeの場合、親要素に対する絶対位置 */
    position: absolute;
    /* 絶対位置指定（上） */
    top: 0;
    /* 絶対位置指定（右） */
    right: 0;
    /* 背景色指定（変数：ボタン背景色（hover時）） */
    background-color: var(--button_background_hover);
    /* アニメーション指定（1回タイプ）（変数：ボタンアニメーション時間） */
    transition: all 0.5s ease;
}
.button.special4::after {
    /* 幅 */
    width: 200%;
    /* 高さ */
    height: 200%;
    /* 初期位置の指定&45度回転させる */
    transform: translate(80%) translateY(-25%) rotate(45deg);
}
.button.special5::after {
    /* 幅 */
    width: 100%;
    /* 高さ */
    height: 100%;
    /* 初期位置の指定 */
    transform: translate(90%);
}
.button:hover.special1,
.button:hover.special2,
.button:hover.special3,
.button:hover.special4,
.button:hover.special5 {
    /* 背景色指定（変数：ボタン文字色（hover時）） */
    color: var(--button_color_hover);
    /* 背景色指定（透明） */
    background-color: transparent;
}
.button:hover.special1::before,
.button:hover.special2::before,
.button:hover.special3::before,
.button:hover.special4::before,
.button:hover.special5::before,
.button:hover.special4::after,
.button:hover.special5::after {
    /* 重なり順 */
    z-index: -1;
}
.button:hover.special1::before {
    /* 初期位置の指定&45度回転させる */
    transform: translateX(-20%) translateY(-25%) rotate(45deg);
}
.button:hover.special2::before {
    /* 初期位置の指定&-45度回転させる */
    transform: translateX(-20%) translateY(-25%) rotate(-45deg);
}
.button:hover.special3::before {
    /* 初期位置の指定&-50回転させる */
    transform: translateX(-60%) translateY(-50%);
}
.button:hover.special4::before {
    /* 初期位置の指定&45度回転させる */
    transform: translateX(-55%) translateY(-25%) rotate(45deg);
}
.button:hover.special4::after {
    /* 初期位置の指定&45度回転させる */
    transform: translate(55%) translateY(-25%) rotate(45deg);
}
.button:hover.special5::before {
    /* 初期位置の指定 */
    transform: translateX(-50%);
}
.button:hover.special5::after {
    /* 初期位置の指定 */
    transform: translate(50%);
}
/**************************************************/
/* コンポーネント（ボタンデザイン）指定　ここまで */
/**************************************************/