@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 1024px) {
	.contents{
		margin-top: 60px;
	}
	.c_wide{ 
		display: none;
	}

	/* タイトル部分　*/
	.page_title {
		color: #5d535e;
        position: relative;
        text-align: center;
        margin: 20px 0 30px;
    }
	.page_title, h2{
        font-family: 'Spectral SC',serif;
        font-size: 5rem;
        display: block;
        text-align: center;
        margin: 0 0 50px;
        letter-spacing: 2px;
        line-height: 1.3;
    }
	 .page_title h2::after {
        content: "";
        height: 1px;
        width: 50px;
        background: #5d535e;
        position: absolute;
        left: 44.5%;
        bottom: -12px;
    }
	ruby {
        font-size: 1.5rem;
        display: block;
    }

	/*　　　　タブ　　　　*/
	input[type="radio"]{
		display: none;
	}

	.tab_wrap{
		width: 100%;
        text-align: center;
        margin: 0 auto 30px;
        box-sizing: border-box;
        }

	.tab_wrap label{
		display: inline-block;
        padding: 10px 0px;	
        width: 49%;
		cursor: pointer;
		margin-bottom:  20px;
    }

    .tab_wrap input[type="radio"]:checked + label{
        border-bottom: 3px solid #dfe166;
        font-weight: bold;
    }

	label{
		font-family: 'Spectral SC',serif;
		font-size: 1.5rem;
		border-bottom: 1px solid #D6D6D6;
	}
    
    /*　　タブ表示切替    */
    .tab_setitem{
        display: none;
        padding: 20px;
        border:  2px solid #ccc;
        background: #fff;
    }

	.tab_setitem{
		display: none;
	}

    #tab1:checked ~ #content1,
	#tab2:checked ~ #content2{
		display: block;
	}
   
	/* セット内容詳細　*/
	img{
		max-width: 100%;
		height: auto;

	}
	.content_title_introduction, h3{
		font-family: 'Spectral SC',serif;
		display: block;
		margin-top: 20px;
		padding: 6px 0;
		min-width: 50%;
		font-size: 20px;
		text-align: center;
		color: #5d535e;
		background-color: #D6D6D6;
	}
	.set-flex-wrapper{
		display: flex;
		flex-flow: column;
		gap: 2rem;
		justify-content: center;
		margin-top: 2rem;
	}
	.set-card {
		display: flex;
  		gap: 1rem;
  		align-items: flex-start;
  		background-color: #fff;
  		padding: 1rem;
  		box-sizing: border-box;
	}

	.set-card img {
		max-width: 150px;
  		height: auto;
  		border: 1px solid #eee;
  		flex-shrink: 0;
	}

	.set_name{
		display: block;
		border-bottom: 2px #D6D6D6 solid;
		font-weight:bold;
		padding:0px 0px 0px 5px;
		color: #ec96a4;
		font-size: 1.5rem;
	}

	 .set_text {
    margin-top: 0.5rem;
	text-align: left;
	font-size: 1.5rem;
	width: 50%;
	}
}

@media screen and (min-width: 1025px) {
	.contents{
		width: calc(100% - 300px);
		margin: 100px 50px 0 300px;
	}
	body {
        font-family: sans-serif;
        line-height: 1.6;
        background-color: #ebedf3;
    }

	.page_title {
        position: relative;
        text-align: center;
        margin: 20px 0 40px;
    }
    .page_title h2 {
        font-family: 'Spectral SC',serif;
        font-size: 5rem;
        display: block;
        text-align: center;
        margin: 0 0 80px;
        letter-spacing: 2px;
        line-height: 1.3;
    }
	.page_title h2::after {
        content: "";
        height: 1px;
        width: 50px;
        background: #5d535e;
        position: absolute;
        left: 48.0%;
        bottom: -12px;
	}
    ruby {
        font-size: 1.5rem;
        display: block;
    }
	.c_phone{ 
		display: none;
	}
	.page_title, h2{
        font-family: 'Spectral SC',serif;
        font-size: 5rem;
        display: block;
        text-align: center;
        margin: 0 0 80px;
        letter-spacing: 2px;
        line-height: 1.3;
    }
	 .page-title h2::after {
        content: "";
        height: 1px;
        width: 50px;
        background: #5d535e;
        position: absolute;
        left: 44.5%;
        bottom: -12px;
    }
	ruby {
        font-size: 1.5rem;
        display: block;
    }

	/*　　　　タブ　　　　*/
	input[type="radio"]{
		display: none;
	}

	.tab_wrap{
		width:80%;
        text-align: center;
        margin: 0 auto 30px;
		padding-right: 50px;
        box-sizing: border-box;
        }

	.tab_wrap label {
        display: inline-block;
        padding: 10px 0;
        width: 49%;
        cursor: pointer;
        margin-bottom: 30px;
    }
    .tab_wrap input[type="radio"]:checked + label{
        border-bottom: 3px solid #dfe166;
        font-weight: bold;
    }

	label{
		font-family: 'Spectral SC',serif;
		font-size: 2rem;
		border-bottom: 1px solid #D6D6D6;
	}

	label:hover{
		background-color: #aaadb7;
	}

    /*　　タブ表示切替    */
    .tab_setitem{
        display: none;
        padding: 20px;
        border:  1px solid #ccc;
        background: #fff;
    }

	.tab_setitem img{
		max-width: 100% ;
	}

    #tab1:checked ~  #content1,
    #tab2:checked ~  #content2{
        display: block;
    }

	/* セット内容詳細　*/
	img{
		max-width: 200px;
		height: auto;
	}
	.content_title_introduction, h3{
		/* width: 100%; */
		font-family: 'Spectral SC',serif;
		display: block;
		text-align: center;
		margin-top: 20px;
		padding: 8px 0;
		max-width: 100%;
		font-size: 1.8rem;
		color: #5d535e;
		background-color: #D6D6D6;
	}

	.set-flex-wrapper {
  		display: flex;
  		flex-wrap: wrap;
  		gap: 2rem;
  		justify-content: flex-start;
  		margin-top: 2rem;
	}
	.set-card {
	  	width: calc(50% - 1rem); /* 2列 */
		display: flex;
  		gap: 1rem;
  		align-items: flex-start;
  		background-color: #fff;
  		padding: 1rem;
  		box-sizing: border-box;
	}

	.set-card img {
	max-width: 200px;
  	height: auto;
  	border: 1px solid #eee;
  	flex-shrink: 0;
	}
	
	.set_text{
	text-align: left;
	width: 50%;
	}

	.set_name {
	font-size: 1.5rem;
  	font-weight: bold;
  	color: #ec96a4;
 	margin-bottom: 0.3rem;
	border-bottom: 2px #D6D6D6 solid;
	padding:0px 0px 0px 5px;
	}

	.set_description {
	font-size: 1.3rem;
 	line-height: 2;
	color: #555;
	}
	
}