* { 
	margin: 0; 
	padding: 0; 
	list-style: none; 
	box-sizing: border-box; 
	text-decoration: none; 
	font-family: "Audiowide", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	line-height: 1.3; 
    font-size: clamp(16px, calc((20/1920)*100vw), 20px);
	scroll-behavior: smooth;
}

@media screen and (orientation: portrait), (max-width: 768px) {
    * {
        font-size: clamp(14px, calc((16/768)*100vw), 16px);
    }
}

img {
    max-width: 100%;
}

body {
    display: grid;
    grid-template-columns: clamp(125px, calc((250/1080)*90svh), 250px) calc(100% - clamp(125px, calc((250/1080)*90svh), 250px));
    grid-template-rows: auto auto;
    max-width: 1920px;
    margin-inline: auto;
}

@media screen and (max-height: 460px), (max-width: 768px) {
    body {
        display: block;
    }
}

header {
    grid-column: 1/2;
    grid-row: 1/3;
    position: fixed;
    min-height: 100svh;
    border-right: 1px solid #182A3A;
    border-left: 1px solid #182A3A;
}

header .logo {
    width: clamp(125px, calc((250/1080)*90svh), 250px);
    border-block: 1px solid #182A3A;
}

header nav ul li {
    width: clamp(125px, calc((250/1080)*90svh), 250px);
    border-left: 10px solid #182A3A;
    border-bottom: 1px solid #182A3A;
}

header nav ul li a {
    display: block;
    color: #182A3A;
    font-size: clamp(14px, calc((28/1080)*90svh), 28px);
    padding: min(14px, calc((14/1080)*90svh)) min(30px, calc((30/1080)*90svh));
    overflow: hidden;
    position: relative;
    z-index: 1;
}

header nav ul li a:after {
  background: #182A3A;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}

header nav ul li a:hover {
    color: #D6BB80;
}

header nav ul li a:hover::after {
  transform: scale(1, 1);
}

header nav ul li span {
    display: block;
    font-size: clamp(10px, calc((18/1080)*90svh), 18px);
    margin-top: min(12px, calc((12/1080)*90svh));
}

header nav ul li a:hover span {
    color: #A08348;
}

@media screen and (max-height: 460px), (max-width: 768px) {
    header {
        z-index: 10;
        min-height: inherit;
        display: flex;
        flex-direction: row-reverse;
        border: none;
        width: 100%;
        background: rgba(255,255,255,0.35);
        padding-left: 15px;
        transition: background 0.25s ease;
    }

    header:has(.meanclose),
    header.scrolled {
        background: #fff;
    }

    header .mean-bar {
        width: 100%;
        position: absolute;
    }

    header a:has(.logo) {
        margin-inline: 0 auto;
        z-index: 1;
    }

    header .logo {
        width: inherit;
        border: none;
    }

    header .logo picture {
        display: block;
        max-height: 60px;
        margin-block: 10px;
    }

    header .logo picture img {
        height: 40px;
    }

    header .mean-bar > a {
        display: block;
        width: 60px;
        height: 60px;
        margin-inline: auto 5px;
        color: #182A3A;
        padding: 13px 10px 10px;
        position: relative;
    }

    header .mean-bar > a span {
        display: block;
        height: 2px;
        width: 100%;
        background: #182A3A;
        margin-bottom: 8px;
    }

    header .mean-bar > a.meanclose span {
        transform: rotate(45deg);
        left: 22%;
        top: 36%;
        position: absolute;
        max-width: 32.5px;
        margin-bottom: 0px;
        transform-origin: 50% 50%;
    }

    header .mean-bar > a.meanclose span:nth-of-type(1) {
        transform: rotate(135deg);
        top: 36.5%;
    }

    header .mean-bar > a div {
        position: absolute;
        bottom: 8px;
        font-size: 11px;
        text-align: center;
        width: 100%;
        padding-inline: 10px;
        left: 0px;
    }

    header .mean-bar > a.meanclose div {
        font-size: 10px;
    }

    header .mean-bar nav {
        width: 100%;
        transition: background 0.25s ease;
    }    

    header .mean-bar .meanclose + nav {    
        height: 100svh;
        background: #fff;
    }

    header .mean-bar nav ul {
        max-width: max(280px, 50%);
        margin-inline: auto;
        opacity: 0;
        transition: opacity 0.1s ease;
    }

    header .mean-bar .meanclose + nav ul {
        opacity: 1;
    }

    header .mean-bar nav ul li {
        width: 100%;
        border-left: none;
        text-align: center;
    }

    header .mean-push {
        display: none;
    }
}

@media screen and (max-height: 460px) {
    header nav ul li a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 10px;
        min-height: 35px;
    }

    header nav ul li a span {
        margin-top: 0;
    }
}

main {
    grid-column: 2/3;
    grid-row: 1/2;
    margin-left: 2px;
}

main section {
    min-height: 100svh;
    border-right: 1px solid #182A3A;
    border-bottom: 1px solid #182A3A;
    position: relative;
}

main section h3 {   
    color: #D6BB80;
    font-size: min(96px, calc((96/1920)*100vw));
    text-shadow: min(5px, calc((5/1920)*100vw)) min(5px, calc((5/1920)*100vw)) 0px #182A3A;
    padding: min(100px, calc((100/1920)*100vw));
}

main section h4 {   
    color: #182A3A;
    font-size: clamp(20px, calc((40/1920)*100vw), 40px);
    margin-bottom: min(50px, calc((50/1920)*100vw));
}

main section h4:after {   
    content: "";
    display: block;
    background: #A08348;
    height: 1px;
    width: min(50px, calc((50/1920)*100vw));
    margin-top: min(50px, calc((50/1920)*100vw));
}

main section ul li {
    line-height: 1.75;
    display: flex;
    margin-bottom: 0.75em;
}

main section.two-column {
    display: flex;
    flex-direction: row-reverse;
}

main section.two-column h3 {
    text-align: right;
}

main section.two-column > * {
    width: 50%;
}

main section > *:not(h3) {
    padding: min(100px, calc((100/1920)*100vw)) 0px;
    max-width: min(900px, calc((900/1920)*100vw));
    margin-inline: auto;
}

main section.two-column > *:not(h3) {
    padding: min(200px, calc((200/1920)*100vw)) clamp(20px, calc((100/1920)*100vw), 100px);
}

@media screen and (orientation: portrait), (max-width: 768px) {
    main section {
        border: none;
    }

    main section h3 {
        padding: clamp(80px, calc((100 / 1920) * 100vw), 100px) 20px 20px;
        font-size: max(48px, calc((72 / 768) * 100vw));
        text-align: right;
    }

    main section.two-column {
        display: block;
    }

    main section.two-column > *,
    main section > *:not(h3) {
        width: 100%;
        max-width: 100%;
    }

    main section h4:after {
        width: min(50px, calc((50/768)*100vw));
    }
}

@media screen and (orientation: portrait), (max-height: 460px) {
    main section {
        border: none;
    }
    
    main section.two-column > *:not(h3) {
        padding-top: min(130px, calc((160/768)*100vw));
    }

    main section h3,
    main section.two-column h3 {
        padding-block: 80px 20px;
    }
}

main #mv {
    position: relative;
    padding: min(150px, calc((150/1920)*100vw)) min(100px, calc((100/1920)*100vw)) min(215px, calc((215/1920)*100vw));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

main #mv > * {
    position: relative;
    z-index: 1;
    color: #fff;
    padding: 0;
    margin: 0;
}

main #mv:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: rgba(0, 0, 0, 0.35);
    width: 100%;
    height: 100svh;
}

main #mv h2 {
    font-size: clamp(42px, calc((64/1920)*100vw), 64px);
    text-shadow: min(5px, calc((5/1920)*100vw)) min(5px, calc((5/1920)*100vw)) 0px #182A3A;
    max-width: 100%;
}

main #mv ul {
    position: relative;
    max-width: 100%;
}

main #mv ul li {
    line-height: inherit;
    font-size: clamp(20px, calc((36/1920)*100vw), 36px);
    font-weight: bold;
    text-shadow: 0.09em 0.09em 0 #182A3A;
    padding: clamp(15px, calc((30/1920)*100vw), 30px) clamp(20px, calc((40/1920)*100vw), 40px);
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    opacity: 0;
    animation:mv-message 28s linear infinite;
}

main #mv ul li:nth-child(2) {
    animation-delay: 7s;
}

main #mv ul li:nth-child(3) {
    animation-delay: 14s;
}

main #mv ul li:nth-child(4) {
    animation-delay: 21s;
}

@keyframes mv-message {
    0% {
        width:0%;
        opacity: 1;
    }
    6% {
        width: 100%;
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    18% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

main #mv video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    padding: 0;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

main #mv video.sp {
    display: none;
}

@media screen and (orientation: portrait) {
    main #mv video.pc {
        display: none;
    }

    main #mv video.sp {
        display: block;
    }
}

@media screen and (max-height: 460px), (max-width: 768px) {
    main {
        margin-left: 0;
    }
}

@media screen and (orientation: portrait), (max-width: 768px) {
    main #mv h2 {
        font-size: clamp(24px, calc((42/768)*100vw), 42px);
    }

    main #mv ul li {
        font-size: clamp(10px, calc((24 / 768) * 100vw), 18px);
        padding: clamp(5px, calc((15 / 768) * 100vw), 15px) clamp(10px, calc((20 / 768) * 100vw), 20px);
    }
}

main #about {
    background: linear-gradient(rgba(66,91,111,0.8)), url(../images/about-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: clamp(130px, calc((200/1920)*100vw), 200px) min(100px, calc((100/1920)*100vw)) clamp(80px, calc((250/1920)*100vw), 250px);
    position: relative;
}

main #about:after {
    content: "";
    display: block;
    position: absolute;
    right: min(150px, calc((150/1920)*100vw));
    top: calc(100% - min(250px, calc((250/1920)*100vw)));
    background: #A08348;
    width: clamp(5px, calc((10/1920)*100vw), 10px);
    height: clamp(50px, calc((300/1920)*100vw), 300px);
    box-shadow: min(5px, calc((5/1920)*100vw)) min(5px, calc((5/1920)*100vw)) 0 #182A3A;
    z-index: 1;
    animation: about-after 2s cubic-bezier(.78, .2, .32, .91) infinite;
}

  @keyframes about-after {
    0% {
      height: 0;
      opacity: 0;
    }
    20% {
      height: 0;
      opacity: 1;
    }
    80% {
      height: min(300px, calc((300/1920)*100vw));
      opacity: 1;
    }
    100% {
      height: min(300px, calc((300/1920)*100vw));
      opacity: 0;
    }
  }

main #about div { 
    max-width: min(1200px, calc((1200/1920)*100vw));
    margin-inline: auto;
    display: flex;
    padding-block: 0;
}

main #about div h3 { 
    writing-mode: sideways-lr;
    text-align: end;
    padding: 0 min(140px, calc((140/1920)*100vw)) 0 0;
    font-size: clamp(48px, calc((96 / 1080) * 100svh), 96px);
}

main #about div p {
    color: #fff;
    font-size: clamp(18px, calc((36/1920)*100vw), 36px);
    line-height: 2.2;
    text-shadow: 0.09em 0.09em 0 #182A3A;
}

@media screen and (orientation: portrait) {
    main #about div {
        max-width: 100%;
    }
    
    main #about div h3 { 
        font-size: max(48px, calc((72 / 768) * 100vw));
    }
}

@media screen and (max-width: 768px) {
    main #about div {
        max-width: 100%;
    }

    main #about div p {
        font-size: clamp(14px, calc((18 / 768) * 100vw), 18px);
    }
}

main #business h3 {
    background: linear-gradient(rgba(122,126,116,0.5)), url(../images/business-h3-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

main #business ul {
    padding-left: 1.25em;
}

main #business ul li:before {
    content: "●";
    color: #A08348;
    margin-right: 0.25em; 
    margin-left: -1.25em;
}

main #market {
    flex-direction: row;
}

main #market h3 {
    text-align: left;
    background: linear-gradient(rgba(122,126,116,0.5)), url(../images/market-h3-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

main #market p {
    line-height: 2.5;
}

@media screen and (orientation: portrait), (max-width: 768px) {
    main #market h3 {
        text-align: right;
    }
}

main #strength h3 {
    text-align: left;
    background: linear-gradient(rgba(122,126,116,0.5)), url(../images/strength-h3-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

main #strength ol {
    padding-left: calc(min(100px, calc((100/1920)*100vw)) + min(36px, calc((36/1920)*100vw)) + 0.25em);
}

main #strength ol li {
    font-size: clamp(18px, calc((28/1920)*100vw), 28px);
    font-weight: bold;
    margin-bottom: min(75px, calc((75/1920)*100vw));
}

main #strength ol li:before {
    color: #A08348;
    display: inline-block;
    margin-right: 0.25em; 
    margin-left: calc(clamp(-36px, calc((-36/1920)*100vw), -24px) - 0.25em);
    border: 1px solid #A08348;
    border-radius: 50%;
    text-align: center;
    width: clamp(24px, calc((36/1920)*100vw), 36px);
    height: clamp(24px, calc((36/1920)*100vw), 36px);
}

main #strength ol li:nth-child(1):before {
    content: "1";
}

main #strength ol li:nth-child(2):before {
    content: "2";
}

main #strength ol li:nth-child(3):before {
    content: "3";
}

main #strength ol li span {
    display: block;
    margin-top: min(20px, calc((20/1920)*100vw));
    margin-left: min(35px, calc((35/1920)*100vw));
    font-weight: 400;
}

@media screen and (orientation: portrait), (max-width: 768px) {
    main #strength h3 {
        text-align: right;
    }
    
    main #strength ol li {
        font-size: clamp(16px, calc((18/768)*100vw), 18px);
    }
    
    main #strength ol li:before {
        margin-left: 0;
        width: clamp(19px, calc((24/768) * 100vw), 24px);
        height: clamp(19px, calc((24/768) * 100vw), 24px);
    }

    main #strength ol li span {
        margin-top: 0.5em;
        margin-left: 40px;
    }
}

main #future {
    padding-bottom: 150px;
}

main #future h3 {
    background: linear-gradient(rgba(66,91,111,0.5)), url(../images/future-h3-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
}

main #future ul {
    position: relative;
}

main #future ul:before {
    content: "";
    background: #425B6F;
    width: 0.04em;
    height: min(500px, calc((500/1920)*100vw));
    position: absolute;
    top: min(135px, calc((135/1920)*100vw));
    left: clamp(7px, calc((11/1920)*100vw), 11px);
    z-index: -1;
}

main #future ul li {
    display: flex;
    align-items: baseline;
    line-height: 2.5;
    margin-bottom: 0;
}

main #future ul li:before {
    content: "";
    width: clamp(15px, calc((25/1920)*100vw), 25px);
    height: clamp(15px, calc((25/1920)*100vw), 25px);
    border-radius: 50%;
    background: #A08348;
    display: block;
    margin-right: 0.75em;
    flex-shrink: 0;
}

main #future ul li dl {
    width: 100%;
}

main #future ul li dl dt {
    font-size: clamp(18px, calc((36/1920)*100vw), 36px);
    font-weight: bold;
    line-height: min(70px, calc((70/1920)*100vw));
}

main #future ul li dl dd {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 0 min(50px, calc((50/1920)*100vw));
}

main #future ul li dl dd img {
    margin: 0px 0 0 auto;
    max-width: min(320px, calc((320/1920)*100vw));
}

@media screen and (orientation: portrait), (max-width: 768px) {
    main #future ul {
        padding-inline: 20px;
    }

    main #future ul:before {
        left: 27px;
        top: min(140px, calc((170 / 768) * 100vw));
        height: min(415px, calc((415 / 768) * 100vw));
    }

    main #future ul li:nth-child(3) {
        position: relative;
    }

    main #future ul li:nth-child(3):after {
        content: "";
        background: #425B6F;
        width: 0.04em;
        height: 135px;
        position: absolute;
        top: -120px;
        left: clamp(7px, calc((11 / 1920) * 100vw), 11px);
        z-index: -1;
    }

    main #future ul li dl dt {
        line-height: clamp(20px, calc((70/1920)*100vw), 70px);
    }

    main #future ul li dl dd {
        font-size: 14px;
    }

    main #future ul li dl dd img {
        max-width: min(320px, calc((320/768)*100vw));
    }
}

@media screen and (orientation: portrait), (max-height: 460px) {
    main #future ul {
        padding-top: min(130px, calc((160/768)*100vw));
    }

    main #future ul:before {
        top: min(140px, calc((170 / 768) * 100vw));
    }
}

main #company h3 {
    background: linear-gradient(rgba(66,91,111,0.5)), url(../images/company-h3-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
}

main #company dl {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    padding-bottom: 75px;
}

main #company dl > * {
    display: flex;
    align-items: center;
    padding-block: min(34px, calc((34/1920)*100vw));
    border-bottom: 1px solid #425B6F;
}

main #company dl dt {
    width: min(195px, calc((195/1920)*100vw));
    justify-content: center;
    font-size: clamp(14px, calc((24/1920)*100vw), 24px);
    font-weight: bold;
    border-color: #D6BB80;
}

main #company dl dd {
    width: calc(100% - min(195px, calc((195/1920)*100vw)) - 10px);
    padding-inline: min(30px, calc((30/1920)*100vw));
    font-family: "Noto Sans JP";
}

main #company dl dd.address {
    flex-wrap: wrap;
}

main #company dl dd span {
    font-family: "Noto Sans JP";
}

main #company iframe {
    max-width: 100%;
    padding: 0;
}

@media screen and (orientation: portrait), (max-width: 768px) {
    main #company dl {
        padding-inline: 20px;
    }

    main #company dl dt {
        width: 90px;
    }

    main #company dl dd {
        width: calc(100% - 90px - 10px);
    }
}

@media screen and (orientation: portrait), (max-height: 460px) {
    main #company dl {
       padding-top: min(130px, calc((160/768)*100vw));
    }
}

main #contact {
    position: relative;
    padding: 0 min(50px, calc((50/1920)*100vw)) min(100px, calc((100/1920)*100vw));
}

main #contact:before {
    position: absolute;
    content: "";
    width: min(350px, calc((350/1920)*100vw));
    height: 100%;
    background: url(../images/contact-bg.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    left: 0;
}

main #contact h3 {
    text-align: center;
    padding: min(100px, calc((100/1920)*100vw));
}

main #contact > p {
    padding: 0;
    max-width: 1200px;
    text-align: center;
    margin-top: min(25px, calc((25/1920)*100vw));
    text-shadow:
        0.04em 0.04em 0px #fff,
        -0.04em 0.04em 0px #fff,
        -0.04em -0.04em 0px #fff,
        0.04em -0.04em 0px #fff;
}

main #contact > p span {
    white-space: nowrap;
}

main #contact > div {
    margin-top: min(45px, calc((45/1920)*100vw));
    max-width: min(1200px, calc((1200/1920)*100vw));
    background: #fff;
    border: 1px solid #182A3A;
    padding: min(100px, calc((100/1920)*100vw)) min(150px, calc((150/1920)*100vw));
}

main #contact > div form table {
    width: 100%;
    margin-bottom: min(30px, calc((30/1920)*100vw));
}

main #contact > div form table tr {
    border-bottom: 1px solid #7A7E74;
    display: flex;
}

main #contact > div form table tr th,
main #contact > div form table tr td {
    min-height: min(100px, calc((100/1920)*100vw));
    display: flex;
    align-items: center;
    padding: min(20px, calc((20/1920)*100vw)) min(15px, calc((15/1920)*100vw));
}

main #contact > div form table tr th {
    width: min(330px, calc((430/1920)*100vw));
    text-align: left;
    justify-content: space-between;
    font-size: clamp(12px, calc((20/1920)*100vw), 20px);
}

main #contact > div form table tr th span {
    color: #fff;
    background: #D6BB80;
    font-size: min(18px, calc((18/1920)*100vw));;
    border-radius: min(5px, calc((5/1920)*100vw));
    padding: min(6.5px, calc((6.5/1920)*100vw)) min(7px, calc((7/1920)*100vw));
}

main #contact > div form table tr td {
    width: calc(100% - min(330px, calc((430/1920)*100vw)));
}

main #contact > div form table tr td input,
main #contact > div form table tr td textarea {
    width: 100%;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #182A3A;
    padding: 0.5em;
    min-height: 50px;
    font-family: "Noto Sans JP", sans-serif;
}

main #contact > div form table tr td input:placeholder-shown,
main #contact > div form table tr td textarea:placeholder-shown {
    background: rgba(66, 91, 111, 0.25);
    border: none;
}

main #contact > div form table tr td textarea {
    resize:vertical;
}

main #contact > div form table tr td input#privacy-policy {
    width: inherit;
    display: none;
}

main #contact > div form table tr td input#privacy-policy[type="checkbox"] + label {
    position: relative;
}

main #contact > div form table tr td input#privacy-policy[type="checkbox"] + label:before {
	display: inline-block;
	content: "";
    margin-right: 3px;
    border: 1px solid #182A3A;
    border-radius: 2px;
    width: 18px;
    height: 18px;
	background: #fff;
	margin-top: 2.5px;
}
main #contact > div form table tr td input#privacy-policy[type="checkbox"]:checked + label:before {
	background-color: #182A3A;
}
main #contact > div form table tr td input#privacy-policy[type="checkbox"]:checked + label:after {
	display: block;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	content: "\f00c";
	color: #D6BB80;
	position: absolute;
	top: 50%;
	left: 2.5px;
	transform: translateY(-50%);
	margin-top: 1.5px;
	font-size: 18px;
}

main #contact > div form table + div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px 30px;
}

main #contact > div form table + div input {
    padding-inline: clamp(15px, calc((30/1920)*100vw), 30px);
    border-radius: 5px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

main #contact > div form table + div input:hover {
    opacity: 0.8;
}

main #contact > div form table + div input.submit {
    padding-block: clamp(10px, calc((20/1920)*100vw), 20px);
    color: #D6BB80;
    background: #182A3A;
}

main #contact > div form table + div input.reset {
    padding-block: clamp(7px, calc((14/1920)*100vw), 14px) clamp(5px, calc((10/1920)*100vw), 10px);
    color: #fff;
    background: #7A7E74;
    font-size: clamp(14px, calc((16/1920)*100vw), 16px);
    height: fit-content;
}

main #contact > div .privacy-policy {
    margin-top: min(100px, calc((100/1920)*100vw));
}

main #contact > div .privacy-policy h4 {
    font-size: clamp(20px, calc((24/1920)*100vw), 24px);
    margin-bottom: min(20px, calc((20/1920)*100vw));
    text-align: center;
}

main #contact > div .privacy-policy h4:after {
    display: none;
}

main #contact > div .privacy-policy article {
    border: 1px solid #182A3A;
    padding: 15px 15px 35px;
    position: relative;
    max-height: 200px;
    overflow: hidden;
    transition: all 0s ease;
}

main #contact > div .privacy-policy article:before {
    content: "";
    display: block;
    width: 100%;
    height: 200px;
    background: linear-gradient(transparent, #fff 75%, #fff);
    position: absolute;
    top: 0px;
    left: 0px;
    transition: all 2s ease;
}

main #contact > div .privacy-policy article:has(input:checked) {
    max-height: 100%;
    transition: all 2s ease;
}

main #contact > div .privacy-policy article:has(input:checked):before {
    display: none;
}

main #contact > div .privacy-policy article input {
    display: none;
}

main #contact > div .privacy-policy article label {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

main #contact > div .privacy-policy article:has(input:checked) label {
    transform: rotate(180deg);
}    

main #contact > div .privacy-policy article p,
main #contact > div .privacy-policy article div,
main #contact > div .privacy-policy article ul {
    font-size: clamp(14px, calc((16/1920)*100vw), 16px);
    font-family: "Noto Sans JP";
    text-align: left;
    margin-block: 10px 30px;
}

main #contact > div .privacy-policy article p {
    margin-top: 0;
}

main #contact > div .privacy-policy article p:nth-of-type(1) {
    font-size: clamp(16px, calc((30/1920)*100vw), 20px)
}

main #contact > div .privacy-policy article h5 {
    color: #182A3A;
    font-size: clamp(14px, calc((16/1920)*100vw), 16px);
    margin-bottom: min(10px, calc((10/1920)*100vw));
}

main #contact > div .privacy-policy article ul {
    padding-left: clamp(14px, calc((16/1920)*100vw), 16px);
    margin-inline: 20px;
}

main #contact > div .privacy-policy article ul li {
    display: inherit;
    line-height: inherit;
    font-size: clamp(14px, calc((16/1920)*100vw), 16px);
}

main #contact > div .privacy-policy article ul li:before {
    content: "●";
    color: #182A3A;
    display: inline-block;
    font-size: 10px;    
    position: relative;
    top: -2px;
    width: clamp(14px, calc((16/1920)*100vw), 16px);
    margin-left: clamp(-16px, calc((-16/1920)*100vw), -14px);
}

main #contact > div .privacy-policy article p.notice {
    padding-left: min(24px, calc((24/1920)*100vw));
}

main #contact > div .privacy-policy article p.notice::before {
    content: "※";
    display: inline-block;
    width: 20px;
    margin-left: -24px;
}

@media screen and (orientation: portrait), (max-width: 768px), (max-height: 460px) {
    main #contact {
        padding: 0 20px 50px;
    }

    main #contact h3 {
        padding-top: 80px;
    }
    
    main #contact:before {
        width: 140px;
    }

    main #contact > div {
        max-width: 100%;
    }

    main #contact > div form table {
        margin-bottom: 25px;
    }

    main #contact > div form table tr {
        flex-direction: column;
    }

    main #contact > div form table tr.privacy-policy-check {
        flex-direction: row;
        margin-top: 0;
    }

    main #contact > div form table tr th,
    main #contact > div form table tr td {
        width: 100%;
    }

    main #contact > div form table tr th {
        padding-top: 15px;
        justify-content: flex-start;
    }

    main #contact > div form table tr.privacy-policy-check th {
        padding-bottom: 15px;
    }

    main #contact > div form table tr th span {
        font-size: 10px;
        border-radius: 5px;
        padding: 3px 5px 2px;
        margin-left: 7.5px;
        margin-top: -1px;
    }

    main #contact > div form table tr.privacy-policy-check th span {
        margin-top: 0px;
        flex-shrink: 0;
    }

    main #contact > div form table tr th br {
        display: none;
    }

    main #contact > div form table tr td {
        padding-bottom: 15px;
    }

    main #contact > div form table tr.privacy-policy-check td {
        width: auto;
    }

    main #contact > div form table tr td input#privacy-policy[type="checkbox"] + label:before {
        margin-top: 12px;
    }

    main #contact > div .privacy-policy {
        margin-top: 50px;
    }

    main #contact > div .privacy-policy article:has(input:checked) {
        max-height: inherit;
    }

    main #contact > div form table tr td input#privacy-policy[type="checkbox"]:checked + label:after {
        margin-top: 6px;
        left: 2px;
    }

    main #contact > div .privacy-policy article p.notice {
        padding-left: 18px;
    }

    main #contact > div .privacy-policy article p.notice::before {
        margin-left: -18px;
    }
}

footer {
    grid-column: 2/3;
    grid-row: 2/3;
    background: #182A3A;
    padding: clamp(37.5px, calc((75/1920)*100vw), 75px) clamp(25px, calc((50/1920)*100vw), 50px) clamp(25px, calc((50/1920)*100vw), 50px);
    margin-left: 2px;
}

footer ul {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 70px;
    flex-wrap: wrap;
    gap: 10px 0;
}

footer ul li {
    border-right: 1px solid #7A7E74;
    line-height: clamp(20px, calc((30 / 1920) * 100vw), 30px);;
}

footer ul li:last-child {
    border-right: none;
}

footer ul li a {
    color: #fff;
    font-size: clamp(12px, calc((20 / 1920) * 100vw), 20px);
    padding-inline: clamp(7.5px, calc((15/1920)*100vw), 15px);  
}

footer copyright {
    color: #425B6F;
    display: block;
    text-align: right;
    font-size: clamp(12px, calc((20 / 1920) * 100vw), 20px);
}

@media screen and (orientation: portrait), (max-width: 768px) {
    footer {
        margin-left: 0;
    }

    footer ul li:last-child {
        border-right: 1px solid #7A7E74;
    }
}