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

/* 共通 */
body {
	margin: 0;
    padding: 0;
    background: url(https://www.tealife.co.jp/img/common/bg/bg_paper.jpg);
    font-size: 15px;
    line-height: 160%;
    color: #582525;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    word-break: break-all;
}
a {
	color: #582525;
}
a:hover {
	text-decoration: none;
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}


/* contents */
#fathersday {
	width: 800px;
	max-width: 100%;
	background: #FFF;
    font-size: 18px;
    line-height: 160%;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    color: #582525;
    float: right;
}
#fathersday * {
    box-sizing: border-box;
}
#fathersday a {
    color: #582525;
}
#fathersday .sp {
    display: none !important;
}
#fathersday img {
    vertical-align: top;
    max-width: 100%;
    height: auto;
}
#fathersday h2 {
    margin: 0;
    padding: 0;
}
#fathersday .bold {
	font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: bold !important;
    -webkit-font-smoothing: antialiased;
}
#fathersday strong {
	color: #ea2046;
}
#fathersday small {
	display: inline-block;
	font-size: 14px;
	line-height: 150%;
}
#fathersday img, #fathersday p {
    border: 0;
    margin: 0;
    vertical-align: top;
}
#fathersday dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

/*------ ボタン（共通パーツ） ------*/
#fathersday .btn {
	display: flex;
  	justify-content: center;
	height: 53px;
}
#fathersday .btn:before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 53px;
	background: url("../img/btn_corner.png") no-repeat;
}
#fathersday .btn:after {
	content: "";
	display: inline-block;
	width: 11px;
	height: 53px;
	background: url("../img/btn_corner.png") no-repeat;
	transform: scale(-1,1);
}
#fathersday .btn_close {
    width: 300px;
	margin: auto 0;
}
#fathersday .btn_content {
	display: flex;
  	justify-content: center;
	align-items: center;
	position: relative;
	width: calc(100% - 22px);
	height: 53px;
	background: url("../img/btn_base.png") repeat-x;
}
#fathersday .btn_content span {
	margin-top: -4px;
	color: #FFF;
	font-size: 20px;
}
#fathersday a.btn_link {
	text-decoration: none;
	margin-bottom: 30px;
}
#fathersday .btn_content:after{
	content: "";
    display: inline-block;
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018l6-6-6-6%22%2F%3E%3C%2Fsvg%3E') no-repeat;
	background-size: 100%;
    position: absolute;
    right: 0;
    top: 25%;
    margin: 0;
    color: #FFF;
    font-size: 23px;
    line-height: 100%;
	width: 20px;
	height: 20px;
}
#fathersday .btn_close .btn_content:after {
	content: "×";
    display: inline-block;
    position: absolute;
    right: 0;
    top: 25%;
    margin: 0;
    color: #FFF;
    font-size: 23px;
    line-height: 100%;
	background: none;
}
#fathersday .btn:hover {
	cursor: pointer;
	filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
	text-decoration: none;
}
#fathersday .btn_link {
	display: inline-block;
}

/* intro */
#fathersday #intro {
    text-align: center;
	background: url("../img/back_blue.jpg");
    background-size: cover;
	padding: 50px 0;
}
#fathersday #intro p.intro_txt {
	margin: 0 0 30px 0;
	color: #fff;
}

/* recommend */
#fathersday #recommend {
    margin: 0 0 100px 0;
}
#fathersday #recommend .item {
    margin: 0;
    display: flex;
    justify-content: space-between;
    z-index: 2;
    top: 30px;
    align-items: center;
}
#fathersday #recommend .item.gray,
#fathersday #recommend .item.right-blue {
    position: relative;
}
#fathersday #recommend .item.right-blue {
    padding: 50px 30px;
}
#fathersday #recommend .item.blue  {
    background: #e0f0ff;
    padding: 80px 30px;
}
#fathersday #recommend .item.gray {
   	padding: 50px 30px;
    margin-top: -70px;
}
#fathersday #recommend .item.gray::before,
#fathersday #recommend .item.right-blue::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: skewY(-3deg);
    z-index: -1;
}
#fathersday #recommend .item.gray::before {
    background-color: #e5e7ea;
}
#fathersday #recommend .item.right-blue::before {
    background-color: #ecf9ff;
}
#fathersday #recommend .item .img {
    width: 50%;
}
#fathersday #recommend .item .txt {
    width: 45%;
}
#fathersday #recommend .item .txt h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    line-height: 160%;
}
#fathersday #recommend .item .txt a {
    text-decoration: none;
}
#fathersday #recommend .item .txt a:hover {
    text-decoration: underline;
}
#fathersday #recommend .item .item-btn a {
width: 80%;
display: flex;
justify-content: center;
background: #d7a200 url(../img/btn_arrow03.png) no-repeat 95% 50%;
background-size: 24px;
color: #fff;
text-align: center;
font-size: 18px;
font-weight: bold;
border-radius: 100px;
padding: 10px;
margin-top: 20px;
margin-left: 20%;
}
#fathersday #recommend .item .item-btn a:hover {
    text-decoration: none;
}
#fathersday #recommend .item .txt .itemprice {
    margin: 30px 0 0 0;
    text-align: right;
    font-weight: bold;
    font-size: 18px;
    line-height: 100%;
}
#fathersday #recommend .itemprice span {
    text-align: center;
    font-size: 14px;
	padding: 5px;
	border: 2px solid #b42c33;
	color: #b42c33;
	border-radius: 3px;
	margin-right: 5px;
}

/* itemlist */
#fathersday #itemlist ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 20px;
    padding: 0;
    list-style: none;
}
#fathersday #itemlist ul li {
    width: 50%;
    padding: 10px;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 0%;
}
#fathersday #itemlist ul li h3.itemname {
    margin-top: 5px;
    font-size: 16px;
    font-weight: normal;
    line-height: 160%;
    margin: 5px 0 0 0;
}
#fathersday #itemlist ul li a {
    text-decoration: none;
    min-height: 0%;
}
#fathersday #itemlist ul li a:hover {
    text-decoration: underline;
}
#fathersday #itemlist ul li .itemprice {
    margin: 10px 0;
    text-align: right;
    font-weight: bold;
    font-size: 16px;
    line-height: 160%;
}
#fathersday #itemlist ul li .itemprice strong {
	background: #c92547;
	color: #FFF;
	border-radius: 3px;
	padding: 3px 5px;
	font-size: 14px;
	font-weight: normal;
	line-height: 160%;
	margin-right: 5px;
}
#fathersday #itemlist ul li .itemprivilege {
    color: #c92323;
    font-size: 13px;
    line-height: 160%;
}
#fathersday #itemlist ul li .iteminfo {
    margin-top: auto;
}

/*------ お届け、直送ギフト（簡易包装）・手提げ袋について ------*/
#fathersday .info {
	position: relative;
	width: 93%;
	margin: 0 auto;
}
#fathersday .info .flower01 {
	position: absolute;
	top: 247px;
	left: calc(50% - 676px);
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
#fathersday .info .flower02 {
	position: absolute;
	top: 167px;
	left: calc(50% + 540px);
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
#fathersday .delivery,
#fathersday .packaging {
	margin: 40px auto;
	border: 2px solid #582525;
 	border-radius: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #FFF;
	text-align: left;
}
#fathersday .delivery_title {
  	display:flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	border-radius: 6px 6px 0 0;
	background-color: #582525;
	color: #FFF;
	font-size: 30px;
	line-height: 100%;
}
#fathersday .delivery_title:before {
	content: "";	
	display: inline-block;
	width: 52px;
	height: 36px;
	margin: 0 10px 0 0;
	background: url("../img/icon_delivery.png") no-repeat;
	vertical-align: middle;
}
#fathersday .delivery_img {
	width: 100%;
	text-align: center;
}
#fathersday .delivery ul {
	padding: 40px 50px 20px;
}
#fathersday .delivery li {
	margin-bottom: 5px;
	font-size: 18px;
	line-height: 160%;
}
#fathersday .delivery span.marker {
	background: linear-gradient(transparent 50%, #ffffa5 50%);
	color: #b42c33;
}
#fathersday .packaging .delivery_title:before {
	content: "";	
	display: inline-block;
	width: 35px;
	height: 39px;
	margin: 0 10px 0 0;
	background: url("../img/icon_packaging.png") no-repeat;
	vertical-align: middle;
}
#fathersday .packaging p {
	padding: 40px 50px 20px;
	margin-bottom: 5px;
    font-size: 18px;
    line-height: 160%;
}
#fathersday .packaging img {
	padding: 0 50px;
}
#fathersday .packaging .btn {
	width: 350px;
}
#fathersday .packaging .btn_content {
    background: url(../img/btn_base_gold.png) repeat-x;
}
#fathersday .packaging .btn:before {
    background: url(../img/btn_corner_gold.png) no-repeat;
}
#fathersday .packaging .btn:after {
    background: url(../img/btn_corner_gold.png) no-repeat;
    transform: scale(-1, 1);
}
#fathersday .packaging a.btn_link {
	margin: 30px auto;
    display: flex;
    justify-content: center;
}

/* 遠方に住むお母さんへお届けするには？ */
#fathersday .direct-deli {
	position: relative;
	overflow: hidden;
	margin: 0 auto 30px;
	border-radius: 10px;
	background: #f0f9ff;
	width: 682px;
}
#fathersday .direct-deli input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
#fathersday .direct-deli label {
	display: block;
	position: relative;	
	padding: 40px 50px;
	color: #582525;
	font-size: 26px;
	text-decoration: underline;	
	cursor: pointer;
}
#fathersday .direct-deli label:hover {
	filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
	text-decoration: none;
}
#fathersday .direct-deli input:checked ~ .direct-deli_content {
	max-height: 20em;
}
#fathersday .direct-deli label::after {
	display: block;
	position: absolute;
	top: 34px;
	right: 50px;
	width: 36px;
	height: 36px;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	text-align: center;
}

#fathersday .direct-deli input[type=checkbox] + label::after {
	content: url("../img/btn_arrow01.png");
}

#fathersday .direct-deli input[type=checkbox]:checked + label::after {
	content: url("../img/btn_arrow02.png");
}

#fathersday .direct-deli_content {
	position: relative;
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.35s;
	transition: max-height 0.35s;
	padding: 0 50px;
}

#fathersday .direct-deli_txt {
	margin-bottom: 25px;
	font-size: 18px;
	line-height: 160%;
	width: 65%;
}

#fathersday .direct-deli_img {
	position: absolute;
	top: 0;
	right: 40px;
}

#fathersday .direct-deli_btn {
	width: 340px;
}

#fathersday .direct-deli_attention {
	margin: 25px 0 30px;
}

/*------ 単品バナー ------*/
#fathersday .banner {
    width: 100%;
    margin: 50px auto 0;
	text-align: center;
}