#main{width:100%;margin-right: auto;margin-left: auto;overflow:hidden;}
.daiji{width: 700px;margin-right: auto;margin-left: auto;padding: 80px 0;}



/*about*/
#page_about{display: block;margin-top:70px;margin-bottom: 600px;}
header{display: block;}
/*.tr-wrapper{box-sizing: border-box;
position: relative;
margin-left: auto;
margin-right: auto;
width: 920px;}*/
.tr-headline_01{font-size: 22px;
line-height: 1.6em;
letter-spacing: .1em;
font-weight: 400;
margin-bottom: 12px;
color: #000;
margin: 10 0;
padding: 50 0 30 20;}

#content{display: block;margin-bottom: 30px;padding: 20px 0px 0px 0px;}

.tr-wrapper-list{margin: 0 auto;
line-height: 1.8em;
font-size: 14px;
font-family: "Helvetica Neue",Helvetica,Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
-webkit-text-size-adjust: none;
color: #666;
line-break: strict;}
.tr-grid--showall .tr-grid-item{display: block!important;}
.tr-grid-item{float: left;width: 235px;margin-bottom: 20px;}
.tr-grid-item a{display: block;position: relative;margin:  0 10px;color: HighLight;background-color: #fff;text-decoration: none;}
.tr-grid-item figure{box-sizing: border-box;position: relative;line-height: 0;width: 100%;border: 1px solid #e5e5e5;-webkit-backface-visibility:hidden;background: #fff;overflow: hidden;
margin: 0;padding: 0;display: block;}
.tr-grid-item figure img{height: 100%;}
.tr-grid-item h3{font-size: 14px;line-height: 1.3em;letter-spacing: .1em;position: relative;padding: 8px 0 4px;font-weight: 400;margin: 0;}

.takara01 a::after {
position: absolute;
left: 0;
content: '';
width: 52%;
height: 1.3px;
background: HighLight;
bottom: 1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

.milchjapan01 a::after {
position: absolute;
left: 0;
content: '';
width: 80%;
height: 1.3px;
background: HighLight;
bottom: 1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

.foodstuff01 a::after {
position: absolute;
left: 0;
content: '';
width: 80%;
height: 1.3px;
background: HighLight;
bottom: 1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

.saihodo01 a::after {
position: absolute;
left: 0;
content: '';
width: 52%;
height: 1.3px;
background: HighLight;
bottom: 1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

.komekome01 a::after {
position: absolute;
left: 0;
content: '';
width: 60%;
height: 1.3px;
background: HighLight;
bottom: 1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

.tomos01 a::after {
position: absolute;
left: 0;
content: '';
width: 52%;
height: 1.3px;
background: HighLight;
bottom: 1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

.tomospackage01 a::after {
position: absolute;
left: 0;
content: '';
width: 85%;
height: 1.3px;
background: HighLight;
bottom: 1px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.3s;  /*変形の時間*/
}

.tr-grid-item a:hover {
opacity: 0.8 ;
}


.tr-grid-item a:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
transform-origin: left top; /*左から右に向かう*/
}


/*privacy*/
.privacy_main{margin: -50px 20px;}
.privacy{color: #666;font-size: 21px;font-weight: 400;padding: 5px 0;border-bottom: 2px solid Highlight;line-height: 28px;text-align: start;}
.privacy br{display: none;}
.privacy_title{height: 25px;font-size: 15px;color: HighLight;line-height: 25px;font-weight: 500;}
.privasy_come{font-size: 14px;color: #808080;line-height: 20px;padding-top: 5px;padding-bottom: 30px;}

/*contact*/	
input {
  background: transparent;
  border: none;}
input,textarea {
  border: 1px solid #ddd;
  border-radius: 5px;}
.table_main_sp{display: none;}
.table_main{margin-bottom: 10px;}
.lside{background: #f0f0f0;color: #808080;height: 30px;font-size: 13px;width: 200px;text-align: left;font-weight: normal;padding: 5px 5px 0px 20px;border-radius: 7px;}
.lside2{background: #f0f0f0;color: #808080;height:30px;font-size: 13px;width: 200px;text-align: left;font-weight: normal;padding: 12px 5px 0px 20px;border-radius: 7px;position:absolute;}
.rside{width: auto;padding-left: 10px;}
.txt{display: inline-block;width: 100%;padding: 0.9em;border: 1px solid #999;box-sizing: border-box;border-radius: 5px;}
.form_d{padding : 40px;}
.req{color:#fff;background: #f25449;margin-top: -2.2px; padding: 2px 7px;border-radius: 5px;}
.lside span, .lside2 span{float: right;}
.sousin{width: 160px;height: 40px;font-size: 0.9em;font-weight: 600; color: Highlight;margin-right: 20px;margin-bottom: 20px; border-radius: 5px;border-color: Highlight;}

/*onlinestore*/
.onlinestore{display: block; 
	padding: 94 48 24 48;
	margin: 0 auto 0;
	width: 92%;
	max-width: 1200px;
font-family: TazuganeGothicStdN-Regular,sans-serif;
font-feature-settings: "pnum" on,"lnum" on;
-webkit-text-size-adjust: none;
color: #383e3f;}


/*.section-title
{font-size: 22px;
line-height: 1.6em;
letter-spacing: .1em;
font-weight: 400;
margin-bottom: 12px;
color: #000;
margin: 10 0;padding: 0;}

.tr-wrapper2{padding-top: 85px;}*/




.contents-link a{display: inline-block;
padding-left: 64px;
position: relative;
font-size: 16px;
line-height: 1.5;
color: #383e3f;
text-decoration: none;
transition: color .15s;
margin: 0;
border: 0;
vertical-align: baseline;}

.contents-link a::before {
  content: "";
  width: 48px;
  height: 48px;
  border: 1px solid #55b3dc;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition:   background .15s;
   }
.contents-link a::after {
  content: "";
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTNIMjRMMTYuNjIzIDEiIHN0cm9rZT0iIzU1QjNEQyIvPgo8L3N2Zz4K) no-repeat;
    background-size: auto;
  background-size: contain;
  width: 24px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-100%) translateY(4px);
  transition: left .2s cubic-bezier(.25,.46,.45,.94);}

.onlinestore-list{  display: flex;
  flex-wrap: wrap;
  padding: 0 24px;}

.onlinestore-item{margin-bottom: 32px;width:31.9%;}
.onlinestore-item:not(:nth-child(3n)){margin-right: 2.15%;}
.onlinestore-item a{display: block;color: #383e3f;text-decoration: none;
transition: color .15s;}
.onlinestore-item a .thumb{border: 1px solid #d7d8d9;
width: 100%;
height: 0;
padding-bottom: 54.34783%;
margin-bottom: 24px;
position: relative;
overflow: hidden;}
.onlinestore-item a .thumb img{
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);}
.onlinestore-item a .onlinestore-meta{
display: flex;
align-items: center;
margin-bottom: 12px;	
}
.onlinestore-item a .onlinestore-meta .date{
font-family: AvenirNextLTPro-Regular,sans-serif;
font-size: 12px;
line-height: 1.5;
color: #888b8c;
margin-right: 8px;
}
.onlinestore-item a .onlinestore-meta .category{
  background: #55b3dc;
  border-radius: 4px;
  padding: 4px 9px;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
}
.onlinestore-item a .onlinestore-title{
font-size: 16px;
font-family: TazuganeGothicStdN-Bold,sans-serif;
font-weight: 700;
line-height: 1.5;	
}



@media screen and (min-width: 980px) {
   /* 表示領域が980px以上の場合に適用するスタイル */
.tr-wrapper-list{width: 940px;}}

@media screen and (min-width: 980px) and (max-width: 1167px) {
   /* 表示領域が980px以上、1167px以下の場合に適用するスタイル */
.tr-wrapper-list{width: 940px;}
	.tr-grid-item{width: 235px;padding-bottom: 50px;}
	.tr-grid-item figura img{height: 121px;}}

@media screen and (min-width: 1168px) {
   /* 表示領域が1168px以上の場合に適用するスタイル */
	.tr-wrapper{width: 1108px;}
	.tr-wrapper-list{width: 1128px;}
	.tr-grid-item{width: 225px;padding-bottom: 50px;}
	.tr-grid-item figure img{height: 114px;}}

@media screen and (min-width: 788px) and (max-width: 979px) {
   /* 表示領域が780px以上、979px以下の場合に適用するスタイル */
	.tr-wrapper-list{width: 747px;}
	
	.tr-grid-item{width: 249px;padding-bottom: 50px;}
	.tr-grid-item figure img{height:  129px;}
	.tr-wrapper{width: 728px;}
.takara01 a::after {width:47%;}
.milchjapan01 a::after {width:75%;}
.foodstuff01 a::after {width:75%;}
.saihodo01 a::after {width:47%;}
.komekome01 a::after {width:55%;}
.tomos01 a::after {width:47%;}
.tomospackage01 a::after {width:80%;}
	
}

@media screen and (min-width: 600px) and (max-width: 787px) {
   /* 表示領域が600px以上、787px以下の場合に適用するスタイル */
	.tr-wrapper-list{width: 564px;}
	.tr-grid-item{width: 282px;padding-bottom: 50px;}
	.tr-grid-item figure img{height:  147px;}
	.tr-wrapper{width: 544px;}
.takara01 a::after {width:40%;}
.milchjapan01 a::after {width:65%;}
.foodstuff01 a::after {width:65%;}
.saihodo01 a::after {width:40%;}
.komekome01 a::after {width:47%;}
.tomos01 a::after {width:40%;}
.tomospackage01 a::after {width:70%;}}
	

@media screen and (max-width: 880px) {
   /* 表示領域が880px以下の場合に適用するスタイル */
.daiji{width:100%;}}

@media screen and (max-width: 800px) {
   /* 表示領域が800px以下の場合に適用するスタイル */
#page_about{margin-bottom: 100px;}
.onlinestore-header{justify-content: space-between;margin-bottom: 17px;}
/*.onlinestore-header .section-title{margin-right: 20px;padding: 23px 0;font-size: 20px;}*/
.contents-link{text-align: right;}
.onlinestore-list{display: block;padding: 0;}
.onlinestore-item:not(:nth-child(3n)){margin-right: 0;}
.onlinestore-item{margin-bottom: 32px;width:100%;}
	}

@media screen and (min-width: 0px) and (max-width: 599px) {
   /* 表示領域が0px以上、599px以下の場合に適用するスタイル */
	
	.tr-headline_01{padding-left: 20px;}	
	
.tr-wrapper-list{width: auto;}
.tr-grid--showall{width: auto;height: auto;}
.tr-grid-item {float: none;width: 100%;height: auto;margin-bottom: 15px;padding-bottom: 50px;}
.tr-grid-item a{margin-left: 20px;margin-right: 20px;}
.tr-wrapper{margin-left: 20px;margin-right: 20px; width: auto;}
.takara01 a::after {width:7.5em;}
.milchjapan01 a::after {width:12em;}
.foodstuff01 a::after {width:12em;}
.saihodo01 a::after {width:7.5em;}
.komekome01 a::after {width:9em;}
.tomos01 a::after {width:7.5em;}
.tomospackage01 a::after {width:13em;}}

@media screen and (max-width: 540px) {
  /* 表示領域が540px以下の場合に適用するスタイル */
/*privacy*/
.privacy br{display: block;}
/*contact*/	
.table_main_pc{display: none;}
.table_main_sp{display: block;}
.table_main th{width: 100%;}
.lside{display: block;margin: 10px 0px;padding: 12px 0px 0px 0px;width:100%;}
.lside2{position: static; display: block;margin: 10px 0px;padding: 12px 0px 0px 0px;width:100%;}
.req{margin: -2.2px 5px 0px 0px;}
.rside{display: block;width: 100%;padding: 0;}}