@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--Open_Flex_padding: 0;
		--Open_Flex_Div_order: 1;
		--Open_Flex_P_order: 3;
		--Open_Flex_Link_order: 2;
		--Open_Link_gap: var(--Gap_L);
		--Open_Link_padding: var(--Gap_S) 0 0;
		--Open_Div_H2_font-size: 5vw;
		--Open_Div_H2_Br_display: block;
		--Open_Div_Figure_display: flex;
		--Open_Link_align-items: flex-start;
		--Open_Link_gap: var(--Gap_L);
		--Open_Link_flex-basis: calc( calc( 100% - var(--Gap_L) ) / 2 );
		--Open_Figure_display: none;
	}
}

@media screen and (min-width:769px) {
	:root {
		--Open_Flex_padding: 0 var(--padding) 0;
		--Open_Flex_Div_order: 1;
		--Open_Flex_P_order: 2;
		--Open_Flex_Link_order: 3;
		--Open_Link_gap: var(--Margin_S);
		--Open_Link_padding: var(--Gap_L) 0 0;
		--Open_Div_H2_font-size: var(--H2_font-size);
		--Open_Div_H2_Br_display: none;
		--Open_Div_Figure_display: none;
		--Open_Link_align-items: flex-end;
		--Open_Link_gap: var(--Margin_S);
		--Open_Link_flex-basis: calc( var(--Size_10) * 10 );
		--Open_Figure_display: flex;
	}
}

#open {
	& > div {
		& > div {
			display: flex;
			gap: var(--Gap_M);
			aspect-ratio: auto;
			& .flex {
				display: flex;
				flex-direction: column;
				padding: var(--Open_Flex_padding);
				& > div {
					order: var(--Open_Flex_Div_order);
					display: flex;
					gap: var(--Gap_M);
					& h2 {
						flex: 1;
						margin: 0;
						text-align: left;
						font-size: var(--Open_Div_H2_font-size);
						color: var(--Color_R);
						font-weight: 600;
						& .pc {
							display:  var(--Open_Div_H2_Br_display);
						}
					}
					& > figure {
						flex-basis: auto;
						display: var(--Open_Div_Figure_display);
					}
				}
				& p {
					order: var(--Open_Flex_P_order);
					padding: var(--Gap_L) 0 0;
				}
				& .link {
					order: var(--Open_Flex_Link_order);
					display: flex;
					flex-direction: var(--Flex-direction_CRR);
					align-items: var(--Open_Link_align-items);
					gap: var(--Open_Link_gap);
					padding: var(--Open_Link_padding);
					& a.out {
						position: relative;
						display: flex;
						align-items: baseline;
						margin: var(--Gap_L) 0 0;
						padding: 0 var(--Margin_S) var(--Gap_S) 0;
						font-size: var(--A_font-size);
						color: var(--Color_K);
						font-weight: 600;
						border-bottom: 3px var(--Color_K) solid;
					}
					& a.out:before {
						content: '';
						position: absolute;
						bottom: -2px;
						right: -2px;
						width: var(--Size_30);
						height: 3px;
						border-radius: var(--Border-radius_L);
						background-color: var(--Color_K);
						transform: rotate(50deg);
						transform-origin: calc(100% - 2px) 50%;
					}
					& a.out:after {
						content: "\f08e";
						padding: 0 0 0 var(--Gap_S);
						font-size: var(--Size_10);
						font-family: "Font Awesome 5 Free";
						font-weight: 900;
					}
					& div {
						display: flex;
						gap: var(--Open_Link_gap);
						& a.app {
							flex-basis: var(--Open_Link_flex-basis);
							display: flex;
							align-items: baseline;
							aspect-ratio: 64 / 19;
						}
					}
				}
			}
			& > figure {
				flex-basis: var(--Size_120);
				display: var(--Open_Figure_display);
				align-items: center;
				& img {
					
				}
			}
		}
	}
}

article {
	& .box {
		& figure:after {
			content: '';
			position: absolute;
			width: 50%;
			background: url('../common/svg/circle.svg');
			background-repeat: no-repeat;
			aspect-ratio: 1 / 1;
			animation: 20s linear infinite rotation;
		}
		& > div {
			& .link {
				display: flex;
				flex-wrap: wrap;
				gap: var(--Gap_L);
			}
		}
	}
}

section {
	& .img-right {
		& figure:after {
			top: var(--Gap_S);
			left: var(--Gap_S);
		}
	}
	& .img-left {
		& figure:after {
			top: var(--Gap_S);
			right: var(--Gap_S);
		}
	}
}

@keyframes rotation {
	0% { transform:rotate( 0 ); }
	100% { transform:rotate( 360deg ); }
}