#contents {
font-family: YakuHanJPs, -apple-system, BlinkMacSystemFont, "Open Sans", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img * {
	max-width:100%;
}

:root {
	--bluegray:#44505C;
	--paddingPC:0 16vw;
	--paddingSP:0 5vw;
	--paddingTABLET:0 5vw;
}


@media screen and (max-width: 599px) {
   
}
@media screen and (min-width: 600px) and (max-width: 1024px) {

}
@media screen and (min-width: 1025px) {

}

/* ----------------------------------------------

- contents

---------------------------------------------- */
#contents {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: normal;
      color: #222;
}
@media screen and (max-width: 599px) {
    #contents {
        margin:0 auto;
        width: 100%;
    }
    main h2 {
        border-radius: 0.4rem;
        font-size: 1rem;
        width: 100%;
        margin: 0 auto;
		padding:10px 0;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
     #contents {
        margin:0 auto;
        width: 100%;
    }
    main h2 {
        border-radius: 0.4rem;
        font-size: 1.5rem;
        /* width: 100%; */
        margin: 0 auto;
    }
}
@media screen and (min-width: 1025px) {
    #contents {
        margin:0 auto;
        width: 100%;
    }
    main h2 {
        border-radius: 0.4rem;
        font-size: 2rem;
        width: 100%;
        margin: 0 auto;
    }
}




/* ----------------------------------------------

- mainVisual

---------------------------------------------- */
@media screen and (max-width: 599px) {
    #mainVisual {
        margin: 0 auto;
    }
    #mainVisual img {
        margin:0 auto;
        display: block;
        width: 100%;
        height: auto;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    #mainVisual {
        margin: 0 auto;
    }
    #mainVisual img {
        margin:0 auto;
		display: block;
        width: 100%;
        height: auto;
    }
}
@media screen and (min-width: 1025px) {
    #mainVisual {
        margin: 0 auto;
    }
    #mainVisual img {
        margin:0 auto;
        display: block;
        width: 100%;
        height: auto;
    }
}





/* ----------------------------------------------

- lead

---------------------------------------------- */
@media screen and (max-width: 599px) {
    .lead {
        padding: var(--paddingSP);
    }
    .lead .title {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin: 2rem auto;
    }
    .lead .title span {
        font-size: 18px;
    }
    .lead p:last-child{
        margin: 0 0 3em;
        line-height: 2;
		font-size:14px;
		text-align:left;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .lead {
        margin: 2em 0;
        padding: var(--paddingTABLET);
    }
    .lead .title {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        margin: 4.5em 0 3em;
    }
    .lead .title span {
        font-size: 27px;
    }

    .lead p:last-child{
        margin: 0 0 3em;
        line-height: 2;
        text-align: left;
    }
}
@media screen and (min-width: 1025px) {
    .lead {
        margin: 2em 0;
        padding: var(--paddingPC);
    }
    .lead .title {
        font-size: 140%;
        font-weight: bold;
        text-align: center;
        margin: 4.5em 0 3em;
    }
    .lead .title span {
        font-size: 160%;
    }

    .lead p:last-child{
        margin: 0 0 3em;
        line-height: 2;
    }
}







/* ----------------------------------------------

- navigation

---------------------------------------------- */
@media screen and (max-width: 599px) {
    #navigation {
        padding: var(--paddingSP);
    }
    #navigation ul {
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #navigation li {
		width: 49%;
		margin-bottom: 5px;
		color: #fff;
		box-sizing: border-box;
		}
    #navigation li:nth-child(4n) {
        margin-right: 0;
    }
    #navigation li a {
        position: relative;
        display: block;
        padding: 1em 0;
        background: var(--bluegray);
        color: #fff;
        font-size: 14px;
        text-align: center;
        opacity: 1;
        transition: 0.5s;
    }
	#navigation li:last-child a {
		letter-spacing:-1px;
	}
    #navigation li a:hover {
        text-decoration: none;
        opacity: 0.7;
        transition: 0.5s;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    #navigation {
        padding: var(--paddingTABLET);
    }
    #navigation ul {
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #navigation li {
		width: 24.5%;
		margin-bottom: 5px;
		color: #fff;
		box-sizing: border-box;
    }
    #navigation li a {
        position: relative;
        display: block;
        padding: 1em 0;
        background: var(--bluegray);
        color: #fff;
        font-size: 14px;
        text-align: center;
        opacity: 1;
        transition: 0.5s;
    }
	#navigation li:last-child a {
		letter-spacing:-1px;
	}
    #navigation li a:hover {
        text-decoration: none;
        opacity: 0.7;
        transition: 0.5s;
    }
}
@media screen and (min-width: 1025px) {
    #navigation {
        padding: var(--paddingPC);
    }
    #navigation ul {
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #navigation li {
		width: 24.5%;
		margin-bottom: 5px;
		color: #fff;
		box-sizing: border-box;
        font-size: 82%;
    }
    #navigation li:nth-child(4n) {
        margin-right: 0;
    }
    #navigation li a {
        position: relative;
        display: block;
        padding: 1em 0;
        background: var(--bluegray);
        color: #fff;
        font-size: 120%;
        text-align: center;
        opacity: 1;
        transition: 0.5s;
    }
    #navigation li a:hover {
        text-decoration: none;
        opacity: 0.7;
        transition: 0.5s;
    }
}






/* ----------------------------------------------

- brand

---------------------------------------------- */
@media screen and (max-width: 599px) {
   .brand {
        margin: 30px 0 50px;
    }
    .brand img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .brand {
        margin: 30px 0 79px;
        padding: var(--paddingTABLET);
    }
    .brand img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }
}
@media screen and (min-width: 1025px) {
    .brand {
        margin: 30px 0 100px;
		padding: var(--paddingPC);
    }
    .brand img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }
}

/*
 about
------------------------ */
@media screen and (max-width: 599px) {
	.brand .about {
        display:flex;
        background-color: var(--bluegray);
        color: #ffffff;
        padding: 20px;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .brand .about div {
        width: 100%;
    }   
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .brand .about {
        display:flex;
        background-color: var(--bluegray);
        color: #ffffff;
        padding: 20px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
    }
    .brand .about div {
        //width: 47%;
    }
}
@media screen and (min-width: 1025px) {
     .brand .about {
        display:flex;
        background-color: var(--bluegray);
        color: #ffffff;
        padding: 20px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
    }
	.brand .about div {
        width: 47%;
    }
}

/*
 about_logo
------------------------ */
@media screen and (max-width: 599px) {
   .about_logo {
        padding: 10px 0;
        background-color: #ffffff;
    }
    .about_logo img {
        width: 80%;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .about_logo {
        margin-right: 20px;
        padding: 10px 0;
        background-color: #ffffff;
        width: 37%;
    }
    .about_logo img {
        width: 80%;
    }
}
@media screen and (min-width: 1025px) {
    .about_logo {
        margin-right: 20px;
        padding: 10px 0;
        background-color: #ffffff;
    }
    .about_logo img {
        width: 80%;
    }
}

/*
 about_text
------------------------ */
@media screen and (max-width: 599px) {
   .about_text {
        
    }
	.about_text h2 {
        margin: 0 0;
        font-size: 16px;
        line-height:1.6;
        text-align: center;
    }
	.about_text p {
		text-align:left;
		font-size:14px;
		line-height:1.6;
	}
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .about_text {
		 width: 60%;
		 }
	.about_text h2 {
        margin: 0 auto 10px;
        font-size: 18px;
        line-height:1.6;
        text-align: center;
    }
	.about_text p {
		text-align:left;
		font-size:14px;
		line-height:1.6;
	}
}
@media screen and (min-width: 1025px) {
    .about_text {
        
    }
	.about_text h2 {
        margin: 0 0 1rem;
        font-size: 140%;
        line-height:1.6;
        text-align: center;
    }
	.about_text p {
		text-align:left;
		font-size:14px;
		line-height:1.6;
	}
}

/*
 note
------------------------ */
@media screen and (max-width: 599px) {
   .brand .note {
        margin: 0 0 2em;
        text-align: right;
        padding: var(--paddingSP);
    }
    .brand .note li::before {
        content: "※";
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .brand .note {
        margin: 0 0 2em;
        text-align: right;
    }
    .brand .note li::before {
        content: "※";
    }
}
@media screen and (min-width: 1025px) {
    .brand .note {
        margin: 0 0 2em;
        text-align: right;
    }
    .brand .note li::before {
        content: "※";
    }
}

/*
 lineup
------------------------ */
@media screen and (max-width: 599px) {
   .brand .lineup {
        margin: 10px 0 30px;
        padding: var(--paddingSP);
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
     .brand .lineup {
        margin: 10px 0 30px;
    }
}
@media screen and (min-width: 1025px) {
    .brand .lineup {
        margin: 10px 0 30px;
    }
}

/*
 series
------------------------ */
@media screen and (max-width: 599px) {
   .brand .lineup .series {
        margin: 0 0 10px;
        border-bottom: solid 1px #cccccc;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        padding-bottom: 5px;
    }
    .brand .lineup .series h3 {
        width: 100%;
        margin: 0;
        font-size: 20px;
        text-align: left;
    }
    .brand .lineup .series p {
        font-size: 13px;
        text-align: left;
        width: 100%;
    }
	#kandela .lineup .series p {
		width:100%;
	}
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .brand .lineup .series {
        margin: 0 0 10px;
        border-bottom: solid 1px #cccccc;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 5px;
    }
    .brand .lineup .series h3 {
        width: 24%;
        margin: 0;
        font-size: 150%;
        text-align: left;
    }
    .brand .lineup .series p {
        font-size: 14px;
        text-align: left;
        width: 75%;
    }
	#kandela .lineup .series p {
		width:100%;
	}
}
@media screen and (min-width: 1025px) {
    .brand .lineup .series {
        margin: 0 0 10px;
        border-bottom: solid 1px #cccccc;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 5px;
    }
    .brand .lineup .series h3 {
        width: 21%;
        margin: 0;
        font-size: 150%;
        text-align: left;
    }
    .brand .lineup .series p {
        font-size: 14px;
        text-align: left;
        width: 79%;
    }
	#kandela .lineup .series p {
		width:100%;
	}
}

/*
 lineup ul
------------------------ */
@media screen and (max-width: 599px) {
   .brand .lineup > ul {
        display: flex;
        margin: 20px 0 30px;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .brand .lineup > ul {
        display: flex;
        margin: 20px 0 30px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
}
@media screen and (min-width: 1025px) {
    .brand .lineup > ul {
        display: flex;
        margin: 20px 0 30px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
}

/*
 detail
------------------------ */
@media screen and (max-width: 599px) {
   .brand .lineup .detail {
		display:flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	 .brand .lineup .detail {
		width: 100%;
		margin-bottom: 30px;
	}
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .brand .lineup .detail {
		display:flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	 .brand .lineup .detail {
		width: 48%;
		margin-bottom: 30px;
	}
}
@media screen and (min-width: 1025px) {
    .brand .lineup .detail {
		display:flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	 .brand .lineup .detail {
		width: 48%;
		margin-bottom: 30px;
	}
}

/*
 detail dl
------------------------ */
@media screen and (max-width: 599px) {
   .detail dl {
		width: 100%;
	}
	.detail dt{
		font-size: 16px;
		margin: 8px 0 22px;
		text-align: left;
	}
	.detail dd{
		font-size: 12px;
		text-align: left;
	}
	.detail dd a {
        position: relative;
        display: block;
        width: 100%;
        margin: 1em auto 0;
        padding: 0.5em 0;
        background-color: #fff;
        border: solid 1px #ccc;
        text-align: center;
        transition: 0.5s;
    }
    .detail dd a::after {
        content: "\f105";
        font-family: FontAwesome;
        position: absolute;
        right: 1em;
    }
    .detail dd a:hover {
        text-decoration: none;
        opacity: 0.7;
        transition: 0.5s;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .detail dl {
		
	}
	.detail dt{
		font-size: 16px;
		margin-bottom: 22px;
		text-align: left;
	}
	.detail dd{
		font-size: 12px;
		text-align: left;
	}
	.detail dd a {
        position: relative;
        display: block;
        margin: 1em auto 0;
        padding: 0.5em 0;
        background-color: #fff;
        border: solid 1px #ccc;
        text-align: center;
		transition: 0.5s;
    }
    .detail dd a::after {
        content: "\f105";
        font-family: FontAwesome;
        position: absolute;
        right: 1em;
    }
    .detail dd a:hover {
        text-decoration: none;
        opacity: 0.7;
        transition: 0.5s;
    }
}
@media screen and (min-width: 1025px) {
    .detail dl {
		
	}
	.detail dt{
		font-size: 18px;
		margin-bottom: 22px;
		text-align: left;
	}
	.detail dd{
		font-size: 13px;
		text-align: left;
	}
	.detail dd a {
        position: relative;
        display: block;
        margin: 1em auto 0;
        padding: 0.5em 0;
        background-color: #fff;
        border: solid 1px #ccc;
        text-align: center;
		transition: 0.5s;
    }
    .detail dd a::after {
        content: "\f105";
        font-family: FontAwesome;
        position: absolute;
        right: 1em;
    }
    .detail dd a:hover {
        text-decoration: none;
        opacity: 0.7;
        transition: 0.5s;
    }
}

/*
 col1
------------------------ */
@media screen and (max-width: 599px) {
   
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .brand .lineup .col1 {
		width:100%;
	}
	.brand .lineup .col1 img {
		width:50%;
		margin: 0;
	}
	.brand .lineup .col1 dl {
        width: 45%;
    }
}
@media screen and (min-width: 1025px) {
	.brand .lineup .col1 {
		width:100%;
	}
	.brand .lineup .col1 img {
		width:50%;
		margin: 0;
	}
	.brand .lineup .col1 dl {
        width: 45%;
    }
}

/*
 col2
------------------------ */
@media screen and (max-width: 599px) {
   
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
    .brand .lineup .col2 img {
		width:50%;
		margin: 0;
	}
	.brand .lineup .col2 dl {
        width: 45%;
    }
	.brand .lineup .col2_w {
		display:flex;
		flex-direction: column;
		align-items: center;
	}
    .brand .lineup .col2_w dl {
		width:66%;
		margin-top:5px
    }
}
@media screen and (min-width: 1025px) {
    .brand .lineup .col2 img {
		width:50%;
		margin: 0;
	}
	.brand .lineup .col2 dl {
        width: 45%;
    }
	.brand .lineup .col2_w {
		display:flex;
		flex-direction: column;
		align-items: center;
	}
    .brand .lineup .col2_w dl {
		width:66%;
		margin-top:5px
    }
}