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


p.right{
	text-align: right;
	font-size: 15px;
}
									@media screen and (max-width:600px){
										p.right{
											font-size: 10px;
										}
										
										.point{
											margin-top: 0;
											margin-bottom:0;
										}
}
										
/*
h1{
	font-size: 35px;
	border-left: 3px solid #deb887;
	padding: 2px 8px;
	font-family: BIZ UDPMincho;
	margin-bottom: 30px;
}
*/

.txtSection02 .marker{
	background: linear-gradient(transparent 50%,#ffe4e1 50%);
}


.box{
	 margin: 0 auto 2em; 
   padding: 2em; 
   border: 3px solid #eee; 
   position: relative; 
   z-index: 0; 
	margin:5px;
	float: right;
	width: 50%;
	display: block;
}
.box:before {
   border-top: 3px solid #D84F4E; 
   border-left: 3px solid #D84F4E; 
   content: ''; 
   display: block; 
   position: absolute;
   top: -3px; 
   left: -3px; 
   width: 20px; 
   height: 20px; 
   z-index: 1; 
}

.box:after {
   border-bottom: 3px solid #D84F4E; 
   border-right: 3px solid #D84F4E; 
   content: ''; 
   display: block; 
   position: absolute;
   bottom: -3px; 
   right: -3px; 
   width: 20px; 
   height: 20px; 
   z-index: 1; 
}
.box_in img{
	
	margin: 0 auto;
}

									@media screen and (max-width:600px){
										.box img{
						display: block;
						width: 86%;
						margin:0 auto 1em auto;
											max-width: 100%;
					}
					.p1 .p1_txt{
						width: 100%;
						padding: 0;
					}
											
										}


							

h4{
	border-bottom: solid 2px #ddd588;
	position:relative;
	font-size:20px;
	font-weight: bold;
	font-style: italic; 
	font-family: BIZ UDPMincho; 
	margin-bottom: 15px;
	letter-spacing: 3px;
}

				@media screen and (max-width:600px){
					h4 span{ display: block;}
					

				}



h4:after{
	position: absolute;
	content:"";
	display:block;
	border-bottom: solid 2px #BB9F62;
	width: 20%;
}



.point{
	margin: 30px;
	
	
	font-size: 25px;
}

.point p{
	margin-top: 10px;
}
.photo{
	
	display: flex;

	height: auto;
	max-width: 100%;
	justify-content: center;
}

.photo img{
	margin: 10px;
	margin-top: 0;
	width: 20%;
	height: 10%;
	border: 2px solid #ffe0c1;
}

.hr{
	border: 0.5px solid #d3d3d3;
	margin-right: 20px;
    margin-left: 20px;
    margin-top: 80px;
    margin-bottom: 40px;
}

.factory{
	float: right;
	
}



.goal{
	text-align: center;
	display: inline-block;
	
}
	
.p1{
	display: flex;
	flex-wrap:wrap;
	flex-direction: row-reverse;
	width: 100%;

		
	
}
.p1 .p1_img{
	width: 25%;
}
.p1 .p1_txt{
	width: 73%;
	padding-right: 1em;
}




				@media screen and (max-width:1050px){
					.p1 .p1_img{
						width: 40%;
					}
					.p1 .p1_txt {
    width: 60%;

				}
}

				@media screen and (max-width:600px){
					.p1{ 
						}
					.p1 .p1_img{
						display: block;
						width: 86%;
						margin:0 auto 1em auto;
					}
					.p1 .p1_txt{
						width: 100%;
						padding: 0;
						margin-left: 10px;
        margin-right: 10px;
					}

				}



				@media screen and (max-width:600px){
					.seien{ flex-wrap:wrap}
					.seien div {width: 30%;
					font-size: 15px;}
					.seien div p em{font-size:79%;}
					
					

				}

.big{
	display: flex;
	flex: 1;
	margin-bottom: 80px;
	margin-top: 40px;
}


.article{
	padding : 25px;
	border: 2px solid #d3d3d3;
	margin-right: 20px;
    margin-left: 20px;
	width: 50%;
	position: relative;
	z-index: 0;
}

.article img{
	width: 25%;
	height: auto;
	float: left;

	vertical-align: bottom;
}

										@media screen and (max-width:800px){
											.article img {
												width: 40%;
											}
											.article{
											    margin-right: 8px;
												margin-left: 8px;
											}
}

.article p{
	margin: 0;
	line-height: 1.6;
	
}

.article::before{
	border-top: 5px solid #962549 ;
   border-left: 5px solid #962549 ; 
   content: ''; 
   display: block; 
   position: absolute;
   top: -2px;
   left: -2px; 
   width: 20px; 
   height: 20px; 
   z-index: 1; 
}

.article::after{
	
	display: block;
	clear: both;
		border-bottom: 5px solid #962549 ;
   border-right: 5px solid #962549 ; 
   content: ''; 
   display: block; 
   position: absolute;
   bottom: -2px;
   right: -2px; 
   width: 20px; 
   height: 20px; 
   z-index: 1; 
}

.happy{
	padding: 25px;
    margin: 5px;
    /* width: 50%; */
    align-items: center;
    text-align: center;
    display: flex;
    justify-content: center;
}

.happy img{
	width: 30%;
	height: auto;
	float: left;

	vertical-align: bottom;
}

.happy p{
	font-size: 20px; 
	
}

.change{
	color:#D84F4E; 
	font-size: 35px; 
	font-family:BIZ UDPMincho;
	font-weight: bold; 
	
}
.article p{
	margin: 20px 0 0 0;
	line-height: 1.5;
	
}

.introduction{
	margin-bottom: 40px;
}

									@media screen and (max-width:600px) {
										.seien div{
											margin: 3px;
										}
										
										.seien{
											font-size: 12px;
										}
										
										.article{
											flex-wrap: wrap;
											display: flex;
										}
										.article img{
											
											display: block;
											width: 65%;
											margin: 0 auto 1em auto;
										}
										 .hr{
											 margin-top: 40px;
											 margin-bottom: 20px;
										}
										.happy p{
											font-size: 15px;
											margin-left: 20px;
										}
										
										.happy img{
											width: 46%;
										}
										h1{
											font-size: 30px;
									}
										.photo img{
											
											width: 30%;
										
}
										.change{
											font-size: 23px;
										}
}
									
										
																			@media screen and (max-width:400px){
																				.seien{
																					font-size: 8px;
																				}
																				
																				.point{
																					font-size: 13px;
																				}
																				
																				h1{
																					font-size: 20px;
																				}
																				.body{
																					margin-left: 10px;
																					margin-right: 10px;
																				}
																				
																				.photo img{
																					margin: 3px;
																				}
																				.happy p{
																					font-size: 12px;
																					margin-left: 15px;
																					margin-right: 15px;
																				}
																				
																				.happy img{
																					width: 50%;
																				}
																				
																				.article img{
																					width: 75%;
																				}
																				
																				h4{
																					font-size: 18px;
																					letter-spacing: 2px;
																				}
																				.change{
																					font-size: 15px;
																				}
										
										}


.astaxanthin{
	display: flex;
	    align-items: center;
	justify-content: center;
}

											@media screen and (max-width:600px){
											.astaxanthin{
											flex-wrap: wrap;
											display: flex;
												        text-align: center;
										}
												
										.asraxanthin img{
											
											display: block;
											width: 75%;
											margin: 0 auto 1em auto;
										}
												.astaxanthin_cost{
													margin-bottom: 20px;
													text-align: center;
												}
												
												.cost_in{
													margin-bottom: 20px;
													        text-align: center;
												}
												
												
}


.astaxanthin_in p{
	text-align: left;
	height: 100%;
	margin: 3px;
}

.astaxanthin_in{
	text-align: center;
}



.item{
	
	    align-items: center;
    justify-content: center;
  
    margin-left: 30px;
	    padding: 8px;
    text-align: center;
}

.item div{
	    font-size: 16px;
    margin: 5px;
    padding: 12px;
	display: flex;
	align-items: center;
	
}
	.item div::before{
		content: url("https://takigawa.co.jp/img/brand/product/astaxanthin/check_red.svg");
		display: inline-block;
		width: 17px;
		height: 17px;
		margin-right: 5px;
}

.attention{
	width: 40%;
}
	


															@media screen and (max-width:800px){
															.item div {
																
															 font-size: 15px;
															}
																
																.attention img{
																	        
																}
}


.final{
	margin: 40px 0 20px 20px;
	
	font-size: 15px;
}

.titile_num{
	display: flex;
}


.num{
	padding:  2px;
  border: solid 1px;
  border-color: #343434;
	font-size: -1;
	margin-right:10px;
	
}

									

.in_title{
	font-size: 24px;
	font-weight: bold;
	
	margin-bottom: 10px;
	letter-spacing: 2px;
}

.in_title_start{
	font-size: 13px;
	margin: 5px 0 5px 0;
	text-align: center;
}

.title_num{
margin-bottom: 18px;
	align-items: center;
	    text-align: center;
	    margin-top: 20px;
}
																						@media screen and (max-width:920px){
																					.in_title {
																						font-size: 30px;
																							}
}
													
									@media screen and (max-width:920px){
										.in_title{
											font-size: 28px;
										}
										.in_title_start{
											font-size: 12px;
										}
										
}
																							@media screen and (max-width:800px){
																								.title_num {
																									display: block;
}
																								.in_title_start {
																									        margin-top: 7px;
																									margin-bottom: 7px;
																								}
																								.in_title{
																								        font-size: 27px;
																									text-align: center;
																								}
																								.item div{
																									margin-bottom: 0px;
																								}
																								

																								
}

										
												@media screen and (max-width:600px){
													.in_title{
													font-size: 30px;
												}
													.in_title_start {
														font-size: 10px;
													}
												
													.title_num {
														margin-bottom: 15px;
													}
													
													.item div {
														margin: 5px;
														margin: 5px 5px 0 5px;
														padding: 12px;
													}
}

											@media screen and (max-width:500px){
													.in_title{
													font-size: 30px;
												}
													.in_title_start {
														font-size: 13px;
													}
												.item div {
													font-size: 17px;
												}
												    .astax_3 img {
														width: 60%;
												}
												
}


																		@media screen and (max-width: 450px) {
																			.in_title {
																				font-size: 23px;
																			}
																			p.astaxanthin_cost {
																				font-size: 12px;
																				margin: 20px 40px 20px 0;
    
																			}
																			.item div {
																				margin: 0px 5px 0 5px;
																			}
																			.attention img {
																				width: 200px;
																			}
}

												
p.astaxanthin_cost{
	font-size: 13px;
	line-height: 1.6;
	    margin-bottom: 5px;
	
}
p.astaxanthin_cost span{
	display: block;
	margin-bottom: 5px;
}
.cost_in{
	margin-top: 10px;
}

.cost{
	font-size: 17px;
	
}

.headline1 span {
	color: #D84F4E;
	
}


.astax_box{
	text-align: center;
	margin: 100px 0 100px 0;
}
.astax_3{
	display: inline-block;
	margin: 0 10px 0 10px;
	vertical-align: bottom;
}

													@media screen and (max-width: 615px) {
												.astax_3 img{
													margin-right: 50px;
												}
}
																												
.astax_photo{
	text-align: left;
}
.headline2{
	margin-bottom: 0;
    text-align: left;
  
}
.astax_text{
	border: solid 1px #BB9F62;
	padding-top: 37px;
}
.space{
	margin-left: 70px;
	text-align: center;
}



											@media screen and (max-width: 1067px) {
												.space{
													margin-top: 70px;
												}
}


																	
																		@media screen and (max-width: 985px) {
																			.astax_3 img{
																				max-width: 85%;
																			}
																			p.astaxanthin_cost {
																				font-size: 12px;
																			}
																			.cost {
																				font-size: 15px;
																			}
																			.item div {
																				font-size: 14px;
																				margin: 4px;
																				padding: 11px;
																			}
}


																									@media screen and (max-width: 975px) {
																										    .space {
        margin-top: 70px;
    }
}

											@media screen and (max-width:951px){
												.space{
													        margin: 70px auto 0px auto;
												}
												.item{
													    padding: 15px;
												}
												    .item div {
														font-size: 18px;
												}
												.headline2{
													font-size: 23px;
												}
												
												        
												    
}




@media (max-width: 595px) {
  .astax_photo img {
    display: none !important;
  }
}
																								@media screen and (max-width:565px){
																									.astax_photo {
																										text-align: center;
																									}
																									
}


															@media screen and (max-width:500px){
																.item div {
																	font-size: 13px;
																}
																    .item {
																		padding: 5px;
																}
}


.headline2_1 {
    margin-bottom: 0;
    text-align: left;
    padding-left: 10px;
    border-left: 1px solid #bb9f62;
    margin-left: 37px;
	font-size: 19px;
    font-weight: bold;
    color: #BB9F62;
    line-height: 1.6;
    letter-spacing: 0.1em;
}