@charset "utf-8";
/* CSS Document */
/*■全体■*/
* {
   margin: 0px;
   padding: 0px;
   font-family: "Noto Sans Japanese", sans-serif;
   letter-spacing:0.1rem;
}

body{
    overflow-x: hidden !important;
	width:100%;
	-webkit-overflow-scrolling: touch;
	font-weight: 500;
	  box-sizing : border-box;
}

/*改行調整-------------------------------------------------------*/
 .pc_br{
    display:block;
  }

.sp_br{
    display: none;
  }

.tb_br{
	display: none;
}

.clearfix::after  /* 要素の後にプロパティ・値を指定する */ {
	content: ".";  /* 擬似要素を追加する */
	display: block;  /*ブロックボックスを生成する*/
	visibility: hidden;  /*ボックスを非表示にする*/ 
	clear: both;  /* 左寄せ、または右寄せされた全ての要素にたいする回り込みを解除する。 */
	height: 0;  /* 高さを、0pxにする。 */
	line-height: 0;  /*行の高さは、0pxにする。*/
}

#firstscreen{

	position: relative;	

}

.top-video{
  object-fit: cover;
  min-width: 100%;
  height: calc(100vh - 60px);
  margin-top:60px;
}

.top-video_sp{
	display:none;
}

#header{
	width: 100%;
	height: 60px;
	position: fixed;
	top:0px;
    color:#000000;
	display: flex;
    align-items: center;
  	z-index:1000;/*重ね順　数値が大きい方が上になる*/
  	transition: background-color 0.5s linear;
	background-color: rgba(255,255,255,1.00);
	transition: .3s;
}


#header.hide{
	transform: translateY(-100%);
}

#logo{
	margin: auto
}
.top_logo{
	height: 45px;
	vertical-align: middle;
}

/*ハンバーガーメニュー*/
	
.global-nav {
  position: fixed;
  /*right: -320px;*/ /* これで隠れる */
  top: -300px;
  width: 100vw; /* スマホに収まるくらい */
  height: auto;
  padding-top: 0px;
  background-color: #fff;
  transition: all .6s;
  z-index: 200;
  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.hamburger {
  position: absolute;
  width: 60px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 45px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
  top: 50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);	
}
	
.hamburger::after{
	/*content: 'MENU';*/
	bottom: 5px;
	position: absolute;
	text-align: center;
	width: 100%;
}

.global-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.global-nav__item {
  text-align: center;
  padding: 0 14px;
}
.global-nav__item a {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #111;
}
.global-nav__item a:hover {
  background-color: #eee;
}
.hamburger__line {
  position: absolute;
  left: 15px;
  width: 30px;
  height: 3px;
  background-color: #000;
  transition: all .6s;
}
.hamburger__line--1 {
  top: 10px;
}
.hamburger__line--2 {
  top: 20px;
}
.hamburger__line--3 {
  top: 30px;
}

/*動画部分に黒フィルター*/
.black-bg {
  position: fixed;
  left: 0;
  top: 60px;
  width: 100vw;
  height: 100vh; /*次のコンテンツ位置を調整*/
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}f

/* 表示された時用のCSS */
.nav-open .hamburger::after{
	/*content: 'CLOSE';*/
}
	
.nav-open .global-nav {
  /*right: 0;*/
	top:60px;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
}
.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 20px;
}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
}
.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 20px;
}
/*ハンバーガーメニューEND*/	


/*キャッチフレーズ*/
#catch{
	text-align: center;
	color: #ffffff;
	position:absolute; /*必ず必要*/
	z-index: 10; /*必ず必要*/
 	top: 50%;
  	left: 50%;
	width:100%;
  	transform: translateY(-50%) translateX(-50%);
  	-webkit- transform: translateY(-50%) translateX(-50%);
	font-size: 3.8rem;	
}

#catch > p{
	 margin-bottom: 100px;

}

.catch_2{
	font-size:2rem;
	font-family:'Roboto';
}

.left_margin{
	margin-left: 2rem;
}

.catch-btn {
  display: inline-block;
  width: 200px;
  text-align: center;
  background-color: rgba(0,0,0,0);
  border: 5px solid #fff;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  border-radius: 4px;
  position: relative;
  line-height: 1.2;
  margin-bottom:12px;
}

.catch-btn span {
  position: relative;
  z-index: 1;
}

.catch-btn::before,
.catch-btn::after {
  content: "";
  display: block;
  background-color: rgba(0,0,0,0);
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: .2s;
}
.catch-btn::before {
  left: 0;
}
.catch-btn::after {
  right: 0;
}

.catch-btn:hover:before,
.catch-btn:hover:after {
  width: 0;
  background-color: #000;
}

.catch-btn:hover {
  color: #000;
	background-color: #fff;
	border: 5px solid #000;
}

.catch-btn_jp{
	font-size:0.7rem;
}

/*大項目*/
.largeitem{
	margin: 50px auto ;
	text-align: center;
}

.largeitem-jp{
	font-size: 3rem;
    font-weight: 100;
}

.largeitem-us{
	font-family: 'Roboto Condensed',Roboto;
	font-size: 1rem;
}
/*大項目END*/


/*一次的に空間を確保コンテンツ確定次第削除するクラス*/
.kari-box{
	height: 500px;
	text-align: center;
	line-height: 500px;
}

/*ピックアップ商品*/
#pickup{
	width:80%;
	text-align: center;
	margin:auto;
	margin-bottom:100px;
}

.product_item_flex{
	display:flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.product_con{
	text-align:center;
	width:33%;
	margin:50px 0px;
	padding: 25px 25px;
}

.product_con_not{
	/*flex用空要素*/
	width:33%;
	margin:0px 0px;
}


.button {
  position: relative;
  display: inline-block;
  border: 2px solid #fff;
  color: #000;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
  background-color:#fff;
  cursor: pointer;
}
.button::before,
.button::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
}
.button::before {
  top: -2px;
  left: -2px;
}
.button::after {
  bottom: -2px;
  right: -2px;
}

.button:hover::before,
.button:hover::after {
  width: 100%;
  height: 100%;
}
.button:hover::before {
  border-bottom-color: #000;
  border-left-color: #000;
  transition: height .3s, width .3s .3s;
}
.button:hover::after {
  border-top-color: #000;
  border-right-color: #000;
  transition: height .3s, width .3s .3s;
}

.product_item{
	width:100%;
	z-index: 10;
    position: sticky;
}

.p_catch{
	font-size:1.2rem;
	height: 50px;
}
.p_name{
	font-size:1.5rem;
	font-weight:700;
	height: 75px;
}


.product_img{
	width:300px;
	transition: 0.5s;
}
.product_img:hover {
	/*画像の上にカーソルで拡大*/
	/*transform: scale(1.1, 1.1);*/
}

a.p_link{
	color:#000;
	padding: 0 .3em;
  background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
}
a.p_link:hover {
  background-position: -100% 0;
  color: #fff;
}
.p_link_out{
	margin:5px 0px;
}


/*商品一覧ボタン*/

/*商品一覧ボタンから移動してきた際の位置調整*/
#product_list{
	display: block;
    margin: 0 auto;
    padding-top: 60px;
    margin-top: -60px;
    width: 80%;
	margin-bottom: 100px;
}


.product_list_btn {
  padding: 15px 150px;
  position: relative;
  display: inline-block;
  color: #000;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  -webkit-transition: .8s;
  transition: .8s;
  background-color:#fff;
  margin:auto;
  border: solid 2px #000;
}

.product_list_btn:hover {
  color: #fff;
  background-color:#000;
  cursor: pointer;
  text-decoration: none;
  transition: transform .1s;
}

.product_list_btn::after {
  position: absolute;
  bottom: 5px;
  left: 0;
  content: '';
  width: 100%;
  height: 5px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}

.product_list_btn:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}



/*instagram*/

.insta_official{
	display: inline-block;
 	padding: 10px 50px;
 	border-radius: 25px;
	color: #000;
    text-decoration: none;
	border: solid 2px #707070;
}

.insta_official:hover{
	opacity:0.5;
}

.insta_item{
	width:100%;
	height:250px;
	object-fit:cover;
}

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

.insta_icon{
	width: 50px;
	padding-right:15px; 
}

.insta_con{
	text-align: center;
}

.insta_line{
	border-top: 3px solid #000;
	width:15%;
	margin:auto;
}

.insta_odasoken{
	position:relative;
	width:100%;
	overflow: hidden;
}

.odasoken_insta_list .insta_odasoken::before{
	content:"";
	 display:block;
  position:absolute;
  width:100%;
  height:50px;
	background-color:transparent;
	bottom:5px;
	z-index: 99;
}

.insta_odasoken:hover::before{
  transition:all 0.25s;
  background-color: black;
  opacity: 0.6;
}

.insta_odasoken:hover > .insta_caption{
	opacity:1;
}

.insta_caption{
	position:absolute;
	bottom:5px;
	color:white;
	opacity:0;
	transition:all 0.25s;
    text-align: left;
	height: 50px;
    line-height: 50px;
	left: 0;
    right: 0;
    margin: auto;
    text-align: center;
	z-index: 100;
}

.insta_icon_in{
	width:17px;
}

.insta_slider{
	width:80%;
	margin: 50px auto;
}

.instagram-media p{
	font-size: 0.1rem;
	color: aqua;
}

/*メディア掲載*/

#medias{
	width:80%;
	margin:auto;
	margin-bottom:100px;
}
.media_flex{
	display:flex;
	flex-wrap:wrap;
}

.media_item{
	width:calc(50% - 20px);
	display:flex;
	padding: 20px 10px;
	border-top:1px solid lightgray;
}
.media_product_title{
	margin-top:12px;
	font-weight:300;
	margin-bottom:8px;
}

.media_product_name{
	font-weight:200;
	font-size:0.8rem;
	margin-left:8px;
}
.media_img{
	width:calc(50% - 16px);
	object-fit:contain;
	object-position:top;
	margin-right:8px;
}

.media_img_box{
	width:50%;
	margin-right:12px;
	display:flex;
	align-items: flex-start;
}

.media_text_box{
	width:50%;
}

.media_title{
	font-size:1.4rem;
	font-weight:300;
}

.media_date{
	color:gray;
	font-weight:200;
	font-size:0.8rem;
}

.arrow{
	position:absolute;
	top:50%;
	margin-top: -19px;
	width: 18px;
   height: 18px;
	cursor:pointer;
}

.arrow_left {

  left:-40px;
  border-left: 4px solid #000;
  border-bottom: 4px solid #000;
  transform: rotate(45deg);

}

.arrow_right {

  right:-40px;
  border-top: 4px solid #000;
  border-right: 4px solid #000;
  transform: rotate(45deg);

}

/*小田総研instagramグリッド表示*/
.insta_item_odasoken {
    width: 100%;
    height: auto;
    object-fit: cover;
	transition: all .2s ease-in-out;
}

	
ul.odasoken_insta_list {
    list-style: none;
	display: grid;
	gap: 8px 16px;
	grid-template-columns: repeat(7, minmax(42px, 1fr));
    grid-auto-rows: 1fr;
}

ul li:hover .insta_item_odasoken{
	/*opacity: 0.5;*/
	transform: scale3d(1.1,1.1,1); /* hover時の倍率を指定 */
}

.odasoken_insta_list li:nth-child(1) {
	grid-column: 1 / 3;
    grid-row: 1/ 3;
}
.odasoken_insta_list li:nth-child(2) {
}
.odasoken_insta_list li:nth-child(3) {
}
.odasoken_insta_list li:nth-child(4) {
	grid-column: 5 / 8;
    grid-row: 1/ 4;
}
.odasoken_insta_list li:nth-child(5) {

}
.odasoken_insta_list li:nth-child(6) {

}
.odasoken_insta_list li:nth-child(7) {
	grid-column: 1 / 4;
    grid-row: 3/ 6;
}
.odasoken_insta_list li:nth-child(8) {
}
.odasoken_insta_list li:nth-child(9) {
	grid-column: 4 / 6;
    grid-row: 4/ 6;
}
.odasoken_insta_list li:nth-child(10) {
	grid-column: 6 / 8;
    grid-row: 4/ 6;
}


/*ユーザーの側instagramタイトル*/
.balloon {
    position: relative;
    display: inline-block;
    background-color: #fff;
    border-bottom: solid 2px #525252;
    padding: 16px;
    min-width: 240px;
    max-width: 100%;
    text-align: center;
}
.balloon:before,
.balloon:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.balloon:before {
    border: solid 12px transparent;
    border-top: solid 12px #525252;
}
.balloon:after {
    border: solid 14px transparent;
    border-top: solid 14px #fff;
    margin-top: -5px;
}
.balloon p {
    margin: 0;
    padding: 0;
}



iframe.instagram-media{
   color:red !important;
  }

.Caption {
    display: block !important;
    line-height: 10px!important;
    padding: 0 10px 10px !important;
	font-size:0.6rem !important;
}

#instagram{
	margin-bottom: 100px;
}

.insta_item{
	transition: all .2s ease-in-out;
	
}
.insta_item:hover{
	transform: scale3d(1.1,1.1,1); /* hover時の倍率を指定 */
}

/*footer上ナビ*/
.footer_navi_container{
	table-layout:fixed;
	border-collapse: collapse;
	width:100%;
}
.footer_navi_item{
	position:relative;
	border:solid 1px lightgray;
	transition:all 0.25s;
}
.footer_navi_item a:hover{
	color:gray;
}
.footer_navi_item a{
	padding:20px;
	display:block;
	text-decoration:none;
	color:black;
}
.footer_navi_item:after{
    transition:all 0.25s;
	content:"";
	position: absolute;
    top: 50%;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    right: 30px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
    cursor: pointer;

}
.footer_navi_item:hover:after{


    right: 20px;
 
}

/*footer*/

#footer{
	width: 100%;
	background-image: url("img/footer_img.jpg");
	background-repeat:no-repeat;
	background-size: cover;
	background-position: bottom;
}

.black_filter{
	background-color: rgba(0,0,0,0.6);
}

.footer_con{
	width:80%;
	margin:auto;
	padding:25px 0px;
	color:#fff;
}

.footer_flex{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.footer_log{
	width:100%;
	margin-bottom:50px;
	text-align:left;
}

.log_w{
	width:200px;
}

.footer_url{
	list-style: none;
	
}
ul.footer_url li{
	margin-bottom:25px;
}
.footer_url_item{
	text-decoration: none;
	color:#fff;
}

.footer_btn{
	width:50px;
	margin:0px 15px;
	transition: 0.5s;
}
.footer_btn:hover {
	transform: scale(1.3, 1.3);
}

.foot_small_title{
	margin-bottom:10px;
}

.shop_link{
	margin:15px 0 ;
}


.copywriter{
	width:100%;
	text-align: right;
	margin-top:30px;
}


/*■商品一覧ページCSS■*/
.page_title{
	margin-top: 100px;
	margin-bottom: 50px;
	text-align: center;
}

.page_title-jp{
	font-size: 3.5rem;
}

.page_title-us{
	font-family: 'Roboto Condensed',Roboto;
	font-size: 1rem;
}

#quality{
	display: flex;
	align-items: center;
}
.quality_left{
	width: 50%;
}

.quality_text{
	margin: 50px auto;
    font-size: 1.2rem;
    line-height: 2.5rem;
    width: 70%;
}

.quality_right{
	width: 50%;
}

.page_num{
	text-align:center;
}



/*■商品詳細ページCSS■*/
.single_p_content{
}

.single_p_chach{
	margin-top: 150px;
	margin-bottom: 50px;
	text-align:center;
	font-size:2rem;
}

.single_p_first{
	display:flex;
	justify-content: center;
	width: 80%;
    margin: auto;
}

.single_p_first_l{
	width:50%;
	align-self:center;
}

.single_p_name{
	font-size:2.5rem;
	font-weight:700;
}

.single_p_text{
	margin-top:100px;
	margin-right: 150px;
}

.p_img_big{
	width:500px;
	/*margin: 0px 0px 0px 200px;*/
}

#material{
	background-color:#F9F9F9;
	padding-top:100px;
}
.material_contents{
	width:80%;
	margin:auto;
}

.medium_title{
	font-size:1.8rem;
	font-weight:500;
	text-align:center;
	position: relative;
	margin-bottom:50px;
}
.medium_title:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #000;
}



.material_flex{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.material_con{
	width:25%;
	text-align:center;
	margin: 25px 25px;
}

.material_name{
	width:100%;
	margin: 15px 0;
}

.material_img{
	border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
    width:  180px;       /* ※縦横を同値に */
    height: 180px;       /* ※縦横を同値に */
	object-fit: cover;
}

.material_text {
    margin: 15px;
}

/*栄養成分*/
#component{
		background-color:#EEEEEE;
		padding: 100px 0px;
}
.component_contents{
	width:80%;
	margin:auto;
}

.criterion{
	text-align:center;
}

.component_flex{
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
}

.component_con{
	width: 13%;
	margin:25px 5px;
	text-align:center;
}

.component_con_not{
		width: 13%;
	margin:0px 5px;
}


.material_con_not{
	width: 25%;
	margin:0px 25px;
}
	
.component_value{
	font-family: 'Roboto Condensed',Roboto;
	font-size:2rem;
}


/*製造の様子*/
#state-production {
    padding: 100px 0px;
}

.state-production_contents {
    width: 80%;
    margin: auto;
}

.state_production_flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/*画像裏に重なり*/
.state_production_image {
	display: inline-block;
	position: relative;
}
.state_production_image:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	transform: rotate(10deg); /* 回転させる */
	background: #fff;
	z-index: -1;
}

.state_production_image {
    margin: 30px;
}
.state_production_img{
	width:200px;
}
.state_production_img:hover {
      opacity: 0.8;
    }

/*モーダル表示*/
.modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      display: none;
	  z-index: 100;
    }

.bigimg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    }
.bigimg_in{
	width:700px;	
}

.close-btn {
      color: #fff;
      font-size: 40px;
      position: absolute;
      right: 20px;
      top: 100px;
    }

.close-btn a {
      color: #fff;
      text-decoration: none;
    }



/*ご使用について*/
#warning{
		background-color:#F9F9F9;
		padding: 100px 0px;
}

.warning_contents{
	width:80%;
	margin:auto;
}

.warning_flex{
	justify-content: center;
}

.warn_con{
	width: 80%;
    margin: 25px 100px;
}

.small_title {
    font-size: 1.5rem;
}

/*商品個別ショップ*/
#single_shop{
	padding: 100px 0px;
}

.single_shop_contents{
	width:80%;
	margin:auto;
	text-align:center;
}

.single_shop_group{
	margin:25px 0px;
}
.single_shop_link{
	margin:0px 15px;
}

/*楽天市場ボタン*/
.btn-rakuten {
	width:200px;
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #FFFFFF;
  border: solid 2px #BF0000;
  border-radius: 3px;
  transition: .4s;
  background: #BF0000;
}

.btn-rakuten:hover {
  background: #ffffff;
  color: #BF0000;
}

/*YAHOOショッピングボタン*/
.btn-yahoo {
	width:200px;
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #FFFFFF;
  border: solid 2px #FF0033;
  border-radius: 3px;
  transition: .4s;
  background: #FF0033;
}

.btn-yahoo:hover {
  background: #ffffff;
  color: #FF0033;
}

/*Amazonボタン*/
.btn-amazon {
	width:200px;
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #FFFFFF;
  border: solid 2px #F8991D;
  border-radius: 3px;
  transition: .4s;
  background: #F8991D;
}

.btn-amazon:hover {
  background: #ffffff;
  color: #F8991D;
}

.link_text{
	font-size:0.6rem;
}


/*■会社概要■*/
#philosophy{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.philosophy_left{
	width: 50%;
}
img.quality_img {
    width: 100%;
}


.philosophy_text{
	font-size: 1.2rem;
    line-height: 2.5rem;
    width: 70%;
    margin: 50px auto;
}

.philosophy_right{
	width: 50%;
	
}


.profile_table{
	margin: auto;
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 50%;
	/*align-items: center;*/
	padding-bottom: 50px;
}

.profile_item{
	width: 20%;
    border-bottom: solid 5px #707070;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

.profile_value{
	width: 80%;
    border-bottom: solid 1px #707070;
    line-height: 80px;
    /* letter-spacing: 1em; */
    text-indent: 7rem;
}

.profile_value_2_1{
		width: 80%;
    border-bottom: solid 1px #707070;
    line-height: 40px;
    /* letter-spacing: 1em; */
    text-indent: 7rem;
}
.profile_value_2_2{
	 padding-left: 7rem;
}



.googlemap{
	width: 100%;
    border-bottom: solid 1px #707070;
	padding: 25px 0
}

.linedel{
	border:none;
}


#history{
	background-color: #BFBFBF;
	padding: 50px;
	background-image: url(img/history_bg.jpg);
	background-size: cover;
    position: relative;
	background-position: bottom 65% center;
}

#history::before {
   /* 透過させた黒を重ねる */
    background-color: rgba(0,0,0,0.7);
    /* どの範囲に重ねるかを指定 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
}
.history_con{
	color: #fff;
	position: inherit;
}

.history_text{
	width: 70%;
	margin: auto;
	padding-bottom:50px;
	font-size: 1.3rem;
    text-align: center;
    line-height: 3rem;
}
.history_text p{
	letter-spacing: 5px;
}


/*SDGs*/
.goals_img{
	margin: 50px 0px 0px 0px;
}

.initiatives_title{
	text-align: center;
}

hr.initiatives_line {
	width: 10%;
	border-top: 3px solid #000000;
	margin: auto;
}

/*小田総研の取り組み*/
.ini_text{
	display: flex;
	justify-content: center;
	width: 60%;
	margin: auto;
	align-items: center;
}

.sdgs3_img{
	width: 300px;
}

.initiatives_text {
    font-size: 1.2rem;
    line-height: 2.5rem;
}

.sdgs_icongroup{
	width: 70%;
	margin: auto;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin-bottom: 100px;
}

/*SDGｓアイコン群*/
.sdgs_icon{
	width: 13%;
	margin: 15px;
}

.sdgs_icon_not {
    width: 13%;
    margin: 0 15px;
}

/*■NEWS■*/

.news_con{
	width:60%;
	margin:50px auto;
}
.news_con_in{
	width:90%;
	margin:auto;
}

.news_date{
	font-style: italic;
}

.news_taitle{
	font-size:1.5rem;
}
.news_text{
	margin-top:25px;
}

.news_img_space{
	text-align:center;
}

.news_img{
	width:300px;
}

.news_line{
	border-top: 2px dashed #000;
	margin:50px auto;
}

.page_num {
    text-align: center;
    margin: 25px 0px 50px 0px;
}

/*■お問い合わせ■*/
/* Contact Form7 */
 
.contact7 {
	max-width: 60%;
    margin: auto;
    background-color: whitesmoke;
    padding: 50px 0px;
	margin-bottom:100px;
}


.wpcf7-response-output {
	color:red;
}


.contact_flex{
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 25px;
}

.contact_item{
	width:23%;
	min-width:230px;
}

.contact_value{
	width:50%;
}

/*テキストボックス、テキストエリアサイズ調整*/
div.contact_value input[name="your-company"],
div.contact_value input[name="your-name"],
div.contact_value input[name="your-email"],
div.contact_value input[name="your-tel"]{
width: 100%;
}

.wpcf7-textarea{
	width:100%;
}
 
/* 必須マーク */
.contact7 .must {
	background: #FF1A00;
}
 
/* 任意マーク */
.contact7 .optional {
	background: #999;
}

/*エラー（警告文）*/
.wpcf7-not-valid-tip{
	color:red;
}

/*エラー文章位置*/
.wpcf7-response-output {
    text-align: center;
}

/*エリア外に2重で出るエラー文非表示*/
.screen-reader-response {
    display: none;
}

 
.contact7 .must,
.contact7 .optional {
	color: #FFF;
	border-radius: 3px;
	font-size: 10px;
	margin-left: 10px;
	padding: 5px 10px;
	letter-spacing: 2px;
}
.btn_contact7 {
	text-align: center;
}
.btn_contact7 input {
	width: 25%;
	background-color: #000;
	color: #FFF;
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.2em;
	border: 1px solid #000;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;	
}
.btn_contact7 input:hover {
	background-color: #FFF;
	color: #000; 
}

.agree{
	text-align: center;
	padding:25px;
}

.privacy{
	text-align:left;
	margin:auto;
	width: 70%;
height: 200px;
overflow: scroll;
}

/*送信ボタン押下後のメッセージ*/
.wpcf7-response-output {
    color: #000;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: none;
}
.wpcf7 form .wpcf7-response-output {
    border: none;
}


/*■サンキューページ■*/
.thanks_con{
	text-align:center;
	margin: 150px 0;
}

.thanks_text{
	margin:100px 0px;
}

/*■商品ストーリー■*/



.story_con{
	background-color:#EEEEEE;
	font-size:1.8rem;
	line-height:3.6rem;
	padding:50px 0 ;
}

.story_product_catch{
	text-align:center;
	font-size: 2.8rem;
	padding: 50px 0;
	font-family: "UD デジタル 教科書体 N-R";
}

.story_con_in{
	width:80%;
	margin:auto;
}

.story_con_text1{
	font-family: "UD デジタル 教科書体 N-R";
}
.story_con_text2{
	font-family: "UD デジタル 教科書体 N-R";
	margin-bottom:50px;
	width: 60%;
}

.story_con_flex{
	display:flex;
	align-items: center;
	place-content: center;/* align-content および justify-content の一括指定です*/
	justify-content: left;
	margin-bottom: 50px;
}

.story_con_flex2{
	display:flex;
	align-items: center;
	place-content: center;/* align-content および justify-content の一括指定です*/
	justify-content: right;
	flex-direction: row-reverse;
}

.story_add_img{
	width: 40%;
	margin: 50px 50px 50px 0;
	border-radius: 30px;
}

.story_product_url{
	text-align:center;
	margin: 0 0px 0px 50px;
	width: 40%;
}

.story_product_img{
	width:100%;
	border-radius: 30px;
}

.story_p_name {
    font-size: 0.8rem;
    line-height: 1.2rem;
	margin-top:-10px;
	margin-bottom:20px;
}

.story_product_btn {
  padding: 5px 50px;
  position: relative;
  display: inline-block;
  color: #000;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  -webkit-transition: .8s;
  transition: .8s;
  background-color:#fff;
  margin:auto;
  border: solid 2px #000;
  line-height: 2rem;
}

.story_product_btn:hover {
  color: #fff;
  background-color:#000;
  cursor: pointer;
  text-decoration: none;
  transition: transform .1s;
}

.story_product_btn::after {
  position: absolute;
  bottom: 5px;
  left: 0;
  content: '';
  width: 100%;
  height: 5px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}

.story_product_btn:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


.story_btn_zone{
	margin:100px 0px;
}

.story_btn_title{
	text-align:center;
	font-size: 2rem;
	margin-bottom:25px;
}


.story_btn{
	max-width:410px;
	font-size:0.9rem;
	display:flex;
	border: solid 1px #000000;
	align-items: center;
	width: calc(33% - 20px);
	text-decoration: none;
	color:#000;
	margin:25px 10px;
	border-radius: 70px;
}

.story_btn:hover{
	opacity: 0.7;
}

.story_btn_flex{
	display:flex;
    justify-content: space-around;
    margin: auto;
    width: 80%;
    flex-wrap: wrap;
}

.story_btn_img{
	width:80px;
	border-radius: 70px;
}

.story_btn_text{
	width: 100%;
    text-align: center;
	font-size: 0.9rem;
}






/*■スマートフォンサイズ（基本スマホ 320〜559px）■--------------------------------------------------*/
@media screen and (max-width: 559px) {

/*改行調整-------------------------------------------------------*/
 .pc_br{
    display:none;
  }

.sp_br{
    display:block;
  }

.tb_br{
	display:none;
}
	
body{
	font-size:0.9rem;
}
	
.top-video_sp{
  display:block;
  object-fit: cover;
  min-width: 100%;
  height: calc(100vh - 60px);
  margin-top:60px;
  max-width: 100%;/*横スクロール防止*/
}
	
.top-video{
	display:none;
}
	
/*ファーストビュー*/
#catch{
	font-size:2.4rem;
}
#catch > p{
	 margin-bottom: 50px;

}	

.catch-btn{
	width:150px;
	font-size:0.8rem;		
}
.catch_2{
	font-size:1.2rem;
}

/*instagram*/
	.insta_slider{
	width:90%;	
	}
	.insta_caption{
		font-size:8px;
	}
	.slick-dots li{
		margin:0 2px !important;
	}

/*ピックアップ商品*/
#pickup {
    width: 90%;
 }
	
.product_con {
    padding: 35px 0px;
}
	
.largeitem-jp {
    font-size: 2rem;
}
.largeitem-us {
    font-size: 0.8rem;
}
	
.product_con {
    width: 100%;
	margin: 0px 0px;
}
.p_catch {
    font-size: 0.9rem;
	height: 40px;
}
.product_img {
    width: 60%;
}
.p_name {
    font-size: 1rem;
    font-weight: 700;
	height: 50px;
}
	
/*商品リンクのアニメーション削除*/
a.p_link{
  color:#000;
  background-image: none;
  background-position: none;
  background-size: none;
  transition: .none;
	font-size:0.7rem;
}
a.p_link:hover {
  background-position:none;
  color: 000;
}
.p_link_out{
	margin:5px 0px;
}
	
.product_list_btn {
    padding: 15px 50px;

}

	
/*小田総研instagramグリッド表示*/

ul.odasoken_insta_list {
    gap: 5px 10px;
    grid-template-columns: repeat(3, minmax(42px, 1fr));
}

.odasoken_insta_list li:nth-child(1) {
    grid-column: 1/ 3;
    grid-row: 2/ 4;
}
.odasoken_insta_list li:nth-child(4) {
    grid-column: auto;
	grid-row: auto;
}
	
.odasoken_insta_list li:nth-child(6) {
    grid-column: 1/ 2;
    grid-row: 4/ 5;
}
.odasoken_insta_list li:nth-child(7) {
    grid-column: 2/ 3;
    grid-row: 4/ 5;
}
.odasoken_insta_list li:nth-child(8) {
    grid-column: 3/ 4;
    grid-row: 4/ 5;
}

.odasoken_insta_list li:nth-child(9) {
    grid-column: 1/ 2;
    grid-row: 6/ 7;
}

.odasoken_insta_list li:nth-child(10) {
    grid-column: 2/ 4;
    grid-row: 5/ 7;
}
	
/*メディア掲載*/
.media_item{
	width:100%;
	padding: 20px 10px;
	flex-wrap:wrap;
}
#medias{
	width:90%;
	margin-bottom:50px;
}
	

.media_img_box{
	width:100%;
	margin-bottom:12px;
}
	.media_text_box{
		width:100%;
	}

/*フッター*/
.footer_con {
    padding: 50px 0px;
}
	
	
.log_w {
    width: 150px;
}
	
/*footer_navi*/
.footer_navi_item{
	display:block;
	border-bottom:none;
}

.footer_left {
	width:50%;
}
.footer_right {
	width:50%;

}
.footer_btn {
    width: 35px;
    margin: 0px 5px;
}
.footer_log{
	margin-bottom:25px;
}

	
/*ABOUT US*/
.page_title-jp {
    font-size: 2.5rem;
}
.page_title-us {
    font-size: 0.7rem;
}

.philosophy_left{
	width: 100%;
}
.philosophy_right {
    width: 100%;
}
.philosophy_text {
    margin: auto;
    width: 90%;
	font-size: 1rem;
    line-height: 2rem;
}
	
	
	
.profile_table {
    width: 90%;
}

.profile_value {
    text-indent: 2rem;
}
.profile_value_2_1 {
    text-indent: 2rem;
}
.profile_value_2_2 {
    padding-left: 2rem;
}
	
.sp_line{
	padding-left: 2rem;
	}
	
#history {
	padding: 50px 0px;
}
.history_text {
    width: 90%;
	font-size: 1.1rem;
    line-height: 2rem;
}


	
.goals_img {
    width: 250px;
	margin: 0px 0px;
	margin-top:25px;
}
	
hr.initiatives_line {
	margin-bottom: 0px; 
}

.ini_text{
	width: 90%;
flex-wrap:wrap;		
}
.sdgs3_img {
    width: 150px;
}
.sdgs3_img_area{
	width:100%;	
	margin:auto;
	text-align:center;
}
	
.initiatives_text{
	width:100%;
	font-size: 1rem;
    line-height: 2rem;
}
.sdgs_icongroup {
    width: 90%;
}
.sdgs_icon {
    width: 70px;
    margin: 5px;
	height:70px;
}
.sdgs_icon_not{
	/*flex調整用*/
	width: 70px;
    margin: 0px 5px;
}

/*PRODCT*/
#quality {
	flex-wrap: wrap-reverse;
}
.quality_left {
    width: 100%;
}
.quality_right {
    width: 100%;
}
.quality_text {
    width: 90%;
    margin: auto;
	font-size: 1rem;
    line-height: 2rem;
}

	
#product_list {
    width: 90%;
}

/*PRODCT詳細*/
.single_p_chach {
    margin-top: 150px;
    margin-bottom: 25px;
    text-align: center;
    font-size: 1.5rem;
}
.single_p_first {
    flex-wrap: wrap-reverse;
}

.p_img_big {
    width: 250px;
    margin: 0px 0px 0px 0px;
}
	
.single_p_first {
    width: 90%;
}

.single_p_first_l {
    width: 100%;
}
	
.single_p_name {
    font-size: 1.8rem;
    text-align: center;
}
	
.single_p_text {
    margin: 50px 15px;
}
	
.material_contents {
    width: 90%;
}
.material_con {
    width: 100%;
	margin: 25px 25px;
}

/*製造の様子*/
.bigimg_in {
    width: 320px;
}


	

/*栄養成分最終行右寄せSP*/
.component_flex::after {
	display: block;
	content:"";
	width: 45%;
    margin: 0px 5px;
 }
	
.component_con {
    width: 45%;
    margin: 25px 5px;
}	

.warning_contents {
    width: 90%;
}
	
.warn_con {
    width: 90%;
    margin: 25px 15px;
}
	
.small_title {
    font-size: 1.2rem;
}
	
.btn-rakuten {
    margin: 10px 0px;
}
.btn-yahoo {
	margin: 10px 0px;
}
.btn-amazon {
	margin: 10px 0px;
}
	
	
/*NEWS*/
.news_con {
    width: 90%;
}
.news_img {
    width: 150px;
}
	
/*CONTACT*/	
.contact7 {
    max-width: 90%;
}
.contact_flex {
     margin: 0px;
}
.contact_item {
    width: 80%;
    margin: 10px 0px;
}
.contact_value {
    width: 80%;
    margin-bottom: 15px;
}
	
.privacy {
    width: 90%;
}
.btn_contact7 input {
    width: 80%;
}
	
/*■商品ストーリー■*/

.story_con_in {
    width: 90%;
}

.story_con_flex {
    display:block;
}
	
.story_add_img {
    width: 45%;
    margin: 10px 15px 10px 0;
    float: left;
}

.story_con_text1 {
    font-size: 1rem;
    line-height: 2rem;
}

.story_con_flex2 {
	display:block;
}
	
.story_con_text2 {
    line-height: 2rem;
    font-size: 1rem;
	width: 100%;
}
	
.story_product_img{
	width:100%;
}

.story_product_url {
    margin: 0 0px 0px 15px;
	float: right;
}

.story_p_name {
     margin-bottom: 0px;
}
	
.story_btn_zone {
    margin: 50px 0px;
}


.story_product_btn {
    padding: 5px 5px;
    font-size: 15px;
}


.story_btn_flex {
    width: 90%;
}

.story_btn_img {
    width: 70px;
}

.story_btn {
    width: 100%;
    margin: 5px 5px;
}

.story_btn_text {
	font-size:0.8rem;
    width: 90%;
    text-align: center;
    margin: auto;
}
	
	.story_btn_title{
		font-size:1.4rem;
	}
	
.story_product_catch{
	font-size: 1.6rem;
}
	
	
}/*■スマートフォンサイズEND■*/
/*■タブレットサイズ（基本タブレット 560〜1024px）■--------------------------------------------------*/
@media screen and (min-width:560px) and (max-width: 1024px) {
	
.top-video_sp{
  display:block;
  object-fit: cover;
  min-width: 100%;
  height: calc(100vh - 60px);
  margin-top:60px;
  max-width: 100%;/*横スクロール防止*/
}
	
.top-video{
	display:none;
}
	
	
#pickup {
    width: 90%;
}
.product_con {
    width: 50%;
    margin: 25px 0px;
    padding: 25px 0px;
}
.p_catch {
    font-size: 1rem;
}
.product_img {
    width: 200px;
}
.p_name {
    font-size: 1.2rem;
}
a.p_link {
    color: #000;
    background-image: none;
    background-position: none;
    background-size: none;
    transition: .none;
    font-size: 0.7rem;
}
	
	
/*メディア掲載*/
.media_item{
	width:100%;
	padding: 20px 10px;
}
#medias{
	width:90%;
	margin-bottom:50px;
}


.media_img_box{
	width:50%;
}
	
/*ABOUT US*/
.philosophy_left{
	width: 100%;
}
.philosophy_right {
    width: 100%;
}
.philosophy_text {
    margin: auto;
    width: 90%;
}	
.profile_table {
    width: 70%;
}
.history_text {
    width: 90%;
    padding-bottom: 0px;
}

.ini_text {
    width: 90%;
    flex-wrap: wrap;
}

.sdgs3_img {
    width: 250px;
}
.sdgs3_img_area{
	width:100%;	
	margin:auto;
	text-align:center;
}
.initiatives_text{
	width:100%;
}
.sdgs_icongroup {
    width: 90%;
}
	
/*PRODCT*/
#quality {
	flex-wrap: wrap-reverse;
}
.quality_left {
    width: 100%;
}
.quality_right {
    width: 100%;
}
.quality_text {
    width: 90%;
    margin: auto;
}

/*PRODCT詳細*/
.single_p_chach {
    margin-top: 150px;
    margin-bottom: 25px;
    text-align: center;
    font-size: 1.7rem;
}
.single_p_first {
    flex-wrap: wrap-reverse;
}

.p_img_big {
    width: 400px;
    margin: 0px 0px 0px 0px;
}
	
.single_p_first {
    width: 90%;
}

.single_p_first_l {
    width: 100%;
}
	
.single_p_name {
    font-size: 1.8rem;
    text-align: center;
}
	
.single_p_text {
    margin: 50px 15px;
}
	
/*製造の様子*/
.state-production_contents {
    width: 90%;
}

.state_production_image {
    margin: 25px 40px;
}

.state_production_img {
    width: 230px;
}

	
/*NEWS*/
.news_con {
    width: 90%;
}
	
/*CONTACT*/	
.contact7 {
    max-width: 90%;
}
.contact_flex {
     margin: 0px;
}
.contact_item {
    width: 80%;
    margin: 10px 0px;
}
.contact_value {
    width: 80%;
    margin-bottom: 15px;
}
	
.privacy {
    width: 90%;
}
.btn_contact7 input {
    width: 80%;
}
	
.material_contents {
    width: 90%;
}
.material_con {
    width: 44%;
    margin: 25px 15px;
}
	
.material_text {
    margin: 15px;
    font-size: 0.9rem;
}
	
	
.component_contents {
    width: 90%;
}
.component_con {
    width: 25%;
    margin: 25px 15px;
}
.component_con_not {
    width: 25%;
    margin: 0px 15px;
}
	
.warning_contents {
    width: 90%;
}

	
.warn_con {
    width: 100%;
    margin: 25px 15px;
}
	
.single_shop_contents {
    width: 90%;
}
.single_shop_link {
    margin: 0px 0px;
}
	
.btn-rakuten {
    width: 190px;
}
.btn-yahoo {
	 width: 190px;
}
.btn-amazon {
	 width: 190px;
}
	
/*■商品ストーリー■*/

.story_con_in {
    width: 90%;
}

.story_con_flex {
    margin-bottom: 50px;
}

.story_product_img {
    width: 100%;
    border-radius: 30px;
}

.story_product_btn {
    padding: 15px 5px;
}

.story_btn_flex {
    width: 90%;
}

.story_btn {
    width: 320px;
    margin: 15px 10px;
}

.story_btn_img {
    width: 75px;
}

.story_btn_text {
    width: 65%;
    margin: auto;
}
	
	

}/*■タブレットサイズEND■*/