@charset "utf-8";

/* ==================================================================
	company.css
	
=================================================================== */

/* ==================================================================
	top
=================================================================== */

/* --------------------------------
   □ general
-------------------------------- */ 
.contents main{
	background: var(--bg-color-lightgray, #F3F3F3);
    padding-bottom: 70px;
}
.contents{
	padding-bottom: 0;
}

#thanksfairDetail2024 .contents main .accentArea{
	background-image:url("../../images/company/thanksfair/2024/accent.jpg");
}
#thanksfairDetail2022 .contents main .accentArea{
	background-image:url("../../images/company/thanksfair/2022/accent.jpg");
}
#thanksfairDetail2019 .contents main .accentArea{
	background-image:url("../../images/company/thanksfair/2019/accent.jpg");
}
#thanksfairDetail2018 .contents main .accentArea{
	background-image:url("../../images/company/thanksfair/2018/accent.jpg");
}
#thanksfairDetail2016 .contents main .accentArea{
	background-image:url("../../images/company/thanksfair/2016/accent.jpg");
}
#thanksfairDetail2015 .contents main .accentArea{
	background-image:url("../../images/company/thanksfair/2015/accent.jpg");
}

.contents main .vertical{
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

/* --------------------------------
   □ #intro
-------------------------------- */ 
#intro p.txt {
    text-align: center;
    font-size: 112%;
    margin: 60px 0;
    line-height: 1.8;
}

/* --------------------------------
   □ #list
-------------------------------- */ 
#list ul {
    font-size: 0;
    letter-spacing: 0;
    overflow: hidden;
}
#list ul li {
    float: left;
    width: 20%;
    box-sizing: border-box;
}
#list ul li.bigFirst {
    width: 40%;
}
#list ul li.bigEnd {
    float: right;
    width: 40%;
}
#list ul li img {
    width: 100%;
}

#list p.buttonStyle {
    text-align: center;
    margin: 70px 0 0 0;
}
#list p.buttonStyle a {
    width: 30%;
}

@media only screen and
(max-width : 767px) {

    /* --------------------------------
       □ general
    -------------------------------- */ 
    .contents main{
        background:none;
        padding-bottom: 13%;
    }

    /* --------------------------------
       □ #intro
    -------------------------------- */ 
    #intro p.txt {
        text-align: left;
        font-size: 100%;
        margin: 0 0 60px;
        line-height: 2;
    }
    #intro p.txt br {
        display: none;
    }

    /* --------------------------------
       □ #list
    -------------------------------- */ 
    #list ul {
        font-size: 0;
        letter-spacing: 0;
        overflow: hidden;
    }
    #list ul li {
        float: left;
        width: 50%;
        box-sizing: border-box;
    }
    #list ul li.bigFirst {
        width: 50%;
    }
    #list ul li.bigEnd {
        float: left;
        width: 50%;
    }
    #list ul li:last-child {
        width: 100%;
    }

    #list p.buttonStyle {
        text-align: center;
        margin: 13% 0 0 0;
    }
    #list p.buttonStyle a {
        width: 80%;
    }


}