/* ====================================================
   Landing Page Styles - Modern CSS with Nesting
   ==================================================== */

/* CSS Custom Properties (Variables) */
:root {
    /* Colors */
    --primary-color: #032C97;
    --primary-hover: #ff5522;
    --secondary-color: #2c3e50;
    --bg-light-blue: #D5E1FF;
    --accent-color: #ffcc00;
    --text-dark: #333;
    --text-light: #666;
    --bg-light: #f8f9fa;
    --bg-blue: #3760CC;
    --bg-white: #fff;
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Spacing */
    --spacing-xs: 10px;
    --spacing-sm: 20px;
    --spacing-md: 40px;
    --spacing-lg: 60px;
    --spacing-xl: 80px;
    --spacing-2xl: 100px;

    /* Typography */
    --font-base: Noto Sans JP, sans-serif;
    --font-size-base: 1rem;
    --font-size-lg: 1.3rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-hero: clamp(2rem, 5vw, 3.5rem);

    /* Border Radius */
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 50px;

    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.2);
    --shadow-button: 0 4px 15px rgba(255, 107, 53, 0.3);

    /* Transitions */
    --transition-base: all 0.3s ease;
}

body{
    font-family: var(--font-base);
}

br.smonly{
    display: none;
}

strong{
	font-weight: bold;
}

.blue {
    color: var(--primary-color);
}

#header .logo{
    margin: 0;
}
@media screen and (max-width: 941px) {
    #header{
        z-index: 1;
    }
}

.handpuncher-box{
	background-color: white;
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 5px 10px;
	border-radius: 2px;
	border: 2px solid white;
    transition: var(--transition-base);
	img{
		width: 40px;
		margin: 0 10px;
	}
	span{
		color: var(--primary-color);
		font-weight: bold;
		text-shadow: 2px 2px 1px white,
					-2px 2px 1px white,
					2px -2px 1px white,
					0 0 2px white,
					-2px -2px 1px white ;
		font-size: 18pt;
	}
	cursor: default;
    &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.4);
    }
}

/* Reset and Base */
.landing-page {
    margin: 0;
    padding: 0;
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-dark);

    * {
        box-sizing: border-box;
    }

    .inner {
        max-width: 1000px;
        margin-inline: auto;
        padding-inline: var(--spacing-sm);
    }
    p{
        font-size: 1em;
    }
}

/* Top Section */
#header.top-section {
	background: linear-gradient(135deg, white, #E1E4EB);
	padding-bottom: 10em;
    position: relative;
    z-index: 1;
	#mainphoto{
		position: absolute;
		right: 0;
		top: 0;
		width: 50%;
	}
	.inner{
		width: 1200px;
	}
    .soudan-button{
        margin: 0;
    }
	.top-content {
		max-inline-size: 1200px;
		margin-inline: auto;
		padding-top: 6em;
		.title-box{
			margin: 0 auto 2em;
			a{
				display: flex;
				align-items: center;
				gap: 20px;
				img{
					height: 30px;
				}
			}
		}
		#title1{
			display: flex;
			align-items: center;
			font-size: 2.2em;
			transform: skewX(-10deg);
			img{
				width: 160px;
				transform: skewX(10deg);
			}
		}
		h1.main-title{
			display: flex;
			align-items: center;
			transform: skewX(-10deg);
		}
		h1.main-title, h1.main-title sub {
			background: linear-gradient(to right, var(--primary-color), #032889, #0443E5);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			font-size: 34pt;
			margin: var(--spacing-md) auto var(--spacing-md);
			font-weight: bold;
			line-height: 1.3;
			text-align: left;
			sub{
				font-size: 1.2em;
				position: unset;
				height: auto;
				margin: 0;
			}
		}
		small{
			display: block;
			text-align: end;
			color: var(--primary-color);
			width: 55%;
			margin-top: -1.8em;
			transform: skewX(-10deg);
			font-size: 1.8em;
			font-weight: bold;
		}
		h2{
			font-size: 1.2em;
			font-weight: bold;
			margin: 1em 0 2em;
		}
	}
}

#saiyo{
    .inner > p {
        margin: 3em auto;
        text-align: center;
        line-height: 2;
    }
}

#shisaku-nagare{
    padding: 4em 0;
    .inner > p {
        margin: 3em auto;
        text-align: center;
        line-height: 2;
    }
    main{
        background-color: var(--bg-light-blue);
        margin: 3em auto 1em;
        h3{
            padding: 1em;
        }
        span{
            display: block;
            font-size: 1.6em;
            margin: 0.5em 0;
            text-align: center;
        }
        ul{
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            li{
                text-align: center;
                position: relative;
                label{
                    background-color: var(--primary-color);
                    color: var(--bg-white);
                    padding: 0.5em 1em;
                    font-weight: bold;
                    border-radius: var(--radius-sm);
                    font-size: 1.2em;
                    margin: 1em 0;
                    display:block; 
                }
                img{
                    width: 200px;
                    border-radius: 8px;
                }
                &:nth-of-type(-n+2)::after{
                    content: "▶";
                    color: var(--primary-color);
                    position: absolute;
                    font-size: 1.5em;
                    top: 50%;
                    right: -3em;
                    transform: translate(-50%, -50%);
                }
            }
        }
        p{
            text-align: center;
            padding: 2em 0 3em;
        }

    }
}

.section-title {
    font-size: var(--font-size-3xl);
    text-align: center;
    font-weight: bold;
    transform: skewX(-10deg);
}

.soudan-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25em;
    margin: auto;
    max-width: 90%;
    padding: 10px 40px;
	background: linear-gradient(180deg, #f26616 0%, #e8230b 100%);
    color: var(--bg-white);
    text-decoration: none;
    border: 4px solid var(--bg-white);
    border-radius: 12px;
    font-size: var(--font-size-lg);
    font-weight: bold;
    text-align: center;
    transition: var(--transition-base);
    position: relative;
    box-shadow: 0px 2px 4px #b9b9b9;

    &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(255, 107, 53, 0.4);
		color: var(--bg-white);
		background: linear-gradient(135deg, #f26616 0%, #e8230b 100%);
    }
}

/* Problems Section */
#problems{
    position: relative;
    z-index: 1;
}
.problems-section {
    padding-block: var(--spacing-md);
    padding-block-end: calc(var(--spacing-xl) + 80px);
    /*background: linear-gradient(135deg, #13307bd9 0%, #2358e1d9 100%);*/
    background-color: var(--bg-blue);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);

    .section-title,
    .solution-text {
        color: var(--bg-white);
        &>div{
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
	.section-title.italic{
		font-style: italic;
	}
}

.problems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin: 50px auto;
}

.problem-item {
    text-align: center;
    padding: 2em 1em 0;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
    &:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
    }
    h3 {
        font-size: 1.2em;
        color: var(--primary-color);
		font-weight: bold;
    }
}

.problem-icon {
	width: 140px;
    height: 150px;
    margin-inline: auto;
    img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: contain;
    }
}

.solution-text {
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: bold;
    color: var(--primary-color);
    margin-block-start: var(--spacing-md);
	& > div{
		text-align: center;
	}
	& > strong {
		margin: 0.5em 0;
		display: inline-block;
	}
	strong{
		font-size: 1.4em;
	}
}

/* Features Section */
#reasons{
    padding: var(--spacing-xl) 0;
    background: var(--bg-white);
    .reasons-header{
        text-align: center;
        margin-block-end: var(--spacing-lg);
        h2{
            font-size: var(--font-size-3xl);
            color: var(--primary-color);
            font-weight: bold;
            transform: skewX(-10deg);
        }
        img{
            margin: 3em 0;
            height: 150px;
        }
    }

    .reason-grid {
        display: grid;
        grid-template-columns: 1fr 5fr 5fr;
        gap: var(--spacing-md);
        margin: 60px 0;
        .reason-number{
            background-color: var(--bg-light-blue);
            color: var(--primary-color);
            width: 80px;
            height: 80px;
            border-radius: 50%;
            padding: 2px 12px;
            span{
                display: block;
                font-weight: bold;
                font-size: 3em;
                transform: skewX(-10deg);
                text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
            }
        }
        .reason-item {
            p {
                font-size: var(--font-size-base);
                line-height: 2.0;
                margin-top: 15px;
            }
            .reason-title{
                color: var(--primary-color);
                font-size: var(--font-size-2xl);
                font-weight: bold;
                margin: 0;
            }
            .highlight{
                display: inline-block;
                background-color: var(--primary-color);
                color: #F5E382;
                font-weight: bold;
                font-size: var(--font-size-2xl);
                padding: 0 15px;
                border-radius: var(--radius-sm);
                margin: 0;
                box-shadow: 0 4px 0px rgba(0, 0, 0, 0.2);
                small{
                    color: white;
                    font-size: 0.6em;

                }
            }
        }
        .reason-image img{
            border-radius: var(--radius-md);
            height: 250px;
        }
    }
}

/* Bandereau */
#bandereau{
    .inner{
        max-width: 800px;
        padding: 2em 0;
    }
    .soudan-button{
        min-width: 700px;
        margin: 0 auto;
        box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
    }
    background: var(--bg-blue);
    text-align: center;
    color: white;
    padding: var(--spacing-md) 0;
    .flex{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0em auto 4em;
        width: 800px;
        strong{
            display: inline-block;
            margin-left: 1em;
            font-size: var(--font-size-xl);
        }
    }
}

#specs{
    padding: var(--spacing-xl) 0;
    .header{
        text-align: center;
        img{
            height: 150px;
            margin-bottom: 15px;
        }
    }
    #sunpo {
        width: 750px;
        margin: 4em auto;
    }
    table{
        width: 750px;
        margin: 3em auto 0;
        border-collapse: separate;
        border-spacing: 0 15px;
        font-size: 1.1em;
        td, th{
            border: none;
        }
        td {
            text-align: left;
            font-weight: normal;
            color: black;
            font-size: 1em;
            padding-left: 1.5em;
            small{
                font-size: 0.8em;
            }
        }
        th {
            background-color: var(--primary-color);
            color: white;
            font-weight: bold;
            text-align: center;
            width: 7em;
            border-radius: 3px;
            padding: 5px 0;
            letter-spacing: 0.15em;
            .two{
                font-weight: bold;
                letter-spacing: 1em;
                margin-right: -1em;
            }
        }
        span.blue{
            color: var(--primary-color);
        }

    }
    .specs-price-boxes {
        display: flex;
        gap: 4em;
        justify-content: center;
        margin: 20px auto;
    }
    .specs-price-box {
        flex: 1;
        background-color: #f26616;
        border-radius: 12px;
        padding: 10px 20px;
        color: white;
        max-width: 14em;
        font-size: 0.9em;
        .specs-price-label {
            font-size: 1em;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 0 5px;
        }
        .specs-price-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            font-size: 0.85em;
        }
        .specs-price-value {
            margin: 0 0 4px;
            text-align: center;
            font-size: 1.3em;
            span:first-of-type{
                font-size: 1.5em;
            }
            span{
                line-height: 1.1;
                font-weight: bold;
            }
        }
        .specs-price-note {
            font-size: 0.8em;
            margin: 0;
            text-align: center;
        }
        &:last-of-type .specs-price-value{
            padding-top: 8px;

        }
    }
}

/* Q&A Section */
.qa-section {
    padding-block: var(--spacing-xl);
    background: var(--bg-light-blue);
    .qa-box {
        background: var(--bg-white);
        border-radius: var(--radius-md);
        padding: 1em var(--spacing-md) var(--spacing-md);
        margin-block-end: var(--spacing-sm);
        box-shadow: var(--shadow-sm);
        transition: var(--transition-base);
        max-width: 700px;
        margin: 3em auto;
        position: relative;

        &:hover {
            box-shadow: var(--shadow-md);
        }
        .qa{
            margin: 0 auto 1em;
        }
        h3{
            font-size: var(--font-size-lg);
            color: var(--primary-color);
            margin: 0;
            display: flex;
            align-items: flex-start;
            font-weight: bold;
            svg{
                margin-top: 5px;
            }
        }
        ul{
            list-style: disc;
            margin: 0 35px;
            font-size: 1em;
        }
        img{
            position: absolute;
            height: 120px;
            bottom: 0;
            left: 80%;
        }
    }
}

#kenkyusha{
    margin: 5em auto;
    h2.section-title{
        margin: 20px auto;
    }
    .problems-grid {
        gap: var(--spacing-sm);
        & > div {
            background-color: var(--bg-light-blue);
            font-weight: bold;
            padding: 2em;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            transition: var(--transition-base);
            display: grid;
            grid-template-rows: 2fr 1fr 4fr;
            align-items: center;
            justify-items: center;
            gap: 2em;
            line-height: 2;
            text-align: center;
            strong{
                color: var(--primary-color);
                font-size: 1.2em;
                line-height: 1.3;
            }
            p{
                letter-spacing: normal;
                align-self: self-start;
            }
            &:hover {
                transform: translateY(-5px);
                box-shadow: var(--shadow-md);
            }
            img{
                width: 100px;
            }
        }
    }
}

#companygaiyo{
    & > img{
        width: 100%;
        margin-bottom: 1em;
    }
    .inner{
        width: 600px;
    }
    .title{
        padding: 4em 0;
        text-align: center;
        img{
            width: 70px;
        }
    }
    strong, th{
        font-size: 1em;
    }
    strong{
        display: block;
        margin: 0 8px 1.5em;
    }
    table{
        tbody tr td{
            border: none;
            font-weight: normal;
            padding: 5px 0;
            font-size: 1em;
        }
    }
    th{
        width: 5em;
        text-align: center;
        border: none;
    }
    .main > p {
        margin: 3em auto 1em;
        line-height: 2;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    :root {
        --font-size-hero: 2rem;
        --spacing-xl: 60px;
    }
    br.smonly{
        display: block;
    }
    br.lgonly{
        display: none;
    }
    .soudan-button{
        max-width: 100%;
    }
    .handpuncher-box span{
        font-size: 15pt;
    }
    .top-section {
        padding-bottom: 100px;
        .inner{
            width: 100%;
        }
        .soudan-button{
            margin: 0 auto;
            position: absolute;
            width: 90%;
            bottom: 25px;
        }
        #mainphoto{
            top: 185px;
            width: 90%;
        }
        .top-content{
            padding-top: 1em;
            #title1{
                font-size: 1.2em;
                img{
                    width: 80px;
                }
            }
            h1.main-title{
                margin: 0 auto;
                font-size: 22pt;
                &:first-of-type{
                    margin-top: 1em;
                }
                sub{
                    font-size: 1em!important;
                }
            }
            small{
                font-size: 1em;
                width: auto;
                margin-top: 0;
            }
            h2{
                position: relative;
                max-width: 85%;
                font-size: 1em;
                padding-top: 1em;
            }
        }
    }

    .problems-section .solution-text > div {
        flex-direction: column;
        gap: 10px;
    }
    .problems-section{
        clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%)
    }
    .section-title {
        font-size: 1.7rem;
    }

    #reasons .reason-grid{
        display: flex;
        flex-direction: column;
        align-items: center;
        .reason-item {
            .reason-title{
                text-align: center;
                font-size: var(--font-size-xl);
            }
            .highlight{
                display: block;
                margin: 0.5em auto;
                text-align: center;
                font-size: var(--font-size-xl);
            }
            p{
                text-align: center;
            }
        }
    }
    #bandereau .flex{
        width: 100%;
        flex-direction: column;
        gap: 20px;
        margin: 0em auto 2em;
    }
    #bandereau .soudan-button{
        min-width: 90%;
        width: 90%;
    }

    #specs {
        #sunpo{
            width: 100%;
        }
        .specs-price-boxes{
            gap: 1em;
        }
        .specs-price-box{
            padding: 10px;
        }
        table{
            width: 100%;
            font-size: 1em;
            th{
                width: 5em;
            }
            td{
                padding-left: 1em;
                padding-right: 0;
            }
        }
    }

    .specs-content {
        grid-template-columns: 1fr;
    }

    .spec-item {
        grid-template-columns: 1fr;
    }

    .problems-grid {
        grid-template-columns: 1fr;
    }
    #kenkyusha h2.section-title:nth-of-type(2){
        font-size: 1.3em;
    }
    #companygaiyo .inner{
        width: 100%;
    }
    #shisaku-nagare main{
        ul{
            flex-direction: column;
            gap: 2em;
            li:nth-of-type(-n+2)::after{
                content: "▼";
                top: 110%;
                right: calc(50% - 1.25em);
                font-size: 2em;
            }
            p{
                font-size: 0.85em;
            }
        }
    }

}

/* Modern CSS Features */
@supports (backdrop-filter: blur(10px)) {
    .hero-overlay {
        backdrop-filter: blur(5px);
    }
}

/* Smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}