/*--------------------------

AIA Co., Ltd. 

data:2019/8/9   
                         
--------------------------*/

@charset "utf-8";


/* --------------------------
     パソコン表示
-------------------------- */
@media print, screen and (min-width: 767px){
.sp,
.sp_nav {
    display: none;
}

.pc_block{
	display:block;
}

.wrapper {
    overflow: hidden;
}

/*--------------------------
  見出し
--------------------------*/
/*フッター　情報*/
.categry,
.categry div {
    height: 300px;
}

/*--------------------------
  フォント
--------------------------*/
h1{
	font-size: calc(50px + 2.5 * (100vw - 768px)/432);
}

h2 {
    letter-spacing: 3px;
}

h2 span{
	display: block;
    font-size: calc(35px + 2.5 * (100vw - 768px)/432);
    margin-bottom: 5px;
}

h3 {
    font-size: calc(30px + 2.5 * (100vw - 768px)/432);
    letter-spacing: 10px;
	margin:1em 0 1.5em 0;
}

.product h4 {
    font-size: calc(60px + 2.5 * (100vw - 768px)/432);
    letter-spacing: 5px;
    width: 90px;
    height: 90px;
    line-height: 85px;
    margin: 0 auto 0.5em auto;
}

.seasonal h4 {
    width: auto !important;
}

.seasonal h4 span {
    border-radius: 100px;
    margin: 0 10px;
    padding: 0 8px 0 15px;
}

.event_news h4,
.concept h4,
.about h4,
.meeting h4 {
    font-size: calc(23px + 1.5 * (100vw - 768px)/432);
    letter-spacing: 1px;
    margin: 0.3em 0 1em 0;
}

.meeting .advantage h4 {
	text-align:center;
}

.other h4{
	font-size: calc(25px + 2.5 * (100vw - 768px)/432);
    margin: 0 0 0.5em 0;
    padding: 0 0 0.3em 0;
    letter-spacing: 2px;
}

.other h4:first-letter{
  font-size: 150%;
}

.concept .local_sentence h5{
	font-size: calc(23px + 1.5 * (100vw - 768px)/432);
    letter-spacing: 2px;
    margin: 0.8em 0 0.3em 0;
}

.p_name {
    margin: 0.8em auto;
    letter-spacing: 2px;
}

.sentence p,
.sentence li,
.concept .local_sentence p{
    font-size: calc(16px + 1.5 * (100vw - 768px)/432);
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 1px;
}

.small{
	font-size: calc(10px + 1.5 * (100vw - 768px)/432);
}



/*--------------------------
  スペース
--------------------------*/
.pc_mlr05 {
    margin-left: 0.5em;
    margin-right:0.5em;
}

.pc_ml1 {
    margin-left: 1em;
}

.pc_mtb08 {
    margin-top: 0.8em;
	margin-bottom: 0.8em;
}

.pc_mb1{
	margin-bottom: 1em;
}

.feel h1{
	margin-bottom: 0.5em;
}

.product section,
.concept section, 
.about section,
.meeting section,
.other{
    margin-bottom: 10em;
}

.pc_mb4,
.season-gift div,
.online > div,
.met_mail_ok section,
.mail_ok section{
    margin-bottom:4em;
}

footer section,
.product .sentence,
.shop_guide > div{
    margin-bottom:1.5em !important;
}

.contact_form .sentence,
.contact .sentence,
.check_form .sentence {
    margin: 0 auto 1.5em auto !important;
}

.check_form > div,
.met_mail_ok section > div,
.mail_ok section > div{
	margin:3em auto 4em auto;
}

.other .sentence{
	margin:3em 0 4em 0;
}


/*--------------------------
  フレーム 
--------------------------*/
.frame_1200{
	max-width:1200px;
	margin:0 auto;
}

.frame_950{
	max-width:950px;
	margin:0 auto;
}

.pc_f30p{
	width:30%;
	margin:0 auto;
}

.pc_f35p{
	width:35%;
	margin:0 auto;
}

.pc_f50p{
	width:50%;
	margin:0 auto;
}

.pc_f65p{
	width:65%;
	margin:0 auto;
}

.pc_f70p{
	width:70%;
	margin:0 auto;
}

.pc_f90p{
	width:90% !important;
	margin:0 auto;
}

.pc_rf90p{
	width:90% !important;
	margin:0 0 0 auto;
}

.pc_lf90p{
	width:90% !important;
	margin:0 auto 0 0;
}

.pc_f98p{
	width:98% !important;
	margin:0 auto;
}

.pc_flex{
	display:flex;
}

.contact_form .sentence,
.contact .sentence,
.check_form .sentence,
.met_mail_ok section > div,
.mail_ok section > div {
	width:85%;
}

/*--------------------------
  ボタン
--------------------------*/
.top_button a{
	position:relative;
    /*ボタンの形状*/  
	color:#8A153C;
	display:inline-block;
    text-decoration: none;
    outline: none;
}

.top_button a:before,
.top_button a:after {
	content:'';
    /*絶対配置で線の位置を決める*/
	position:absolute;
    /*事前に出現させる線の形状*/
	border:solid #8A153C;
	width:20px;
	height:20px;
    /*アニメーションの指定*/
	transition:all 0.3s ease-in-out;
}

.top_button a:before{
    /*事前に出現させる線の位置*/
	top:0;
	left:0;
    /*事前に出現させる線の形状*/
	border-width:5px 0 0 5px;
}

.top_button a:after{
    /*事前に出現させる線の位置*/
	bottom:0;
	right:0;
    /*事前に出現させる線の形状*/
	border-width:0 5px 5px 0;
}

.top_button a:hover::before,
.top_button a:hover::after{
	width:calc(100% - 5px);
	height:calc(100% - 5px);
	border-color:#8A153C;
}

.news_info .down_button{
	padding:2px 10px;
}


/*--------------------------
  ヘッダー 
--------------------------*/
.header{
	background:#FFF;
	height:110px
}

#header_info{
	position:relative;
	height:100%;
}

.header .logo {
    width: 30%;
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.header .logo img {
    width: 100%;
    margin: 0.3em auto 0 auto;
}

.hother_link {
    display: flex;
    float: right;
}

.honline {
    color: #FFF;
    background: #8A153C;
    padding: 0.8em 0;
    margin: 0.3em 0 0 0;
    display: block;
    width: 200px;
    float: right;
    text-align: center;
    border: #8A153C solid 3px;
}

.honline:hover {
    color: #8A153C;
    background: #FFF;
    border: #8A153C solid 3px;
}

.hother_link .sns {
    margin: 0.8em 1em 0 0;
}

.header_nav {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
	width: 70%;
}

.header_button {
    display: flex;
    text-align: center;
    margin: 0.2em 0 0 0;
    float: right;
	clear: both;
}

.header_button a {
    padding: 0.3em 1.3em;
    display: block;
    position: relative;
    font-size: calc(20px + 0.5 * (100vw - 768px)/432);
    letter-spacing: 2px;	
}

.header_button a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:#8A153C;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.header_button a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}
.header_button span{
	display: block;
    margin-top: 0.4em;
    font-size: calc(10px + 0.5 * (100vw - 768px)/432);
}

/*カテゴリー　トップ*/
#product .header,
#concept .header,
#about .header,
#meeting .header,
#past .header,
#contact .header,
#site_policy .header,
#pp .header,
#check .header,
#met_check .header,
#mail_ok .header {
    border-bottom: #8A153C 5px solid;
}

/*--------------------------
  フッター 
--------------------------*/
.footer_cont > div{
	padding:1em 0 1.5em 0;
}

.footer_cont a{
	color:#FFF;
}

/*事業者情報*/
.footer_cont table {
    text-align: left;
}

.footer_cont thead td{
	font-size:calc(20px + 1.5 * (100vw - 768px)/432);
	line-height: 60px;
}

.footer_cont tbody {
    letter-spacing: 2px;
}

.footer_cont tbody th,
.footer_cont tbody td{
    padding: 0.5em 0;
	text-align:left;
	vertical-align:top;
}

.footer_cont th {
    width: 25%;
}

.sns a:after {
    font-size: 25px;
    font-weight: 900;
}

/*お問合せ*/
.fcont_right .ftitle{
	font-size:calc(20px + 1.5 * (100vw - 768px)/432);
	margin-top: 10px;
	margin-bottom: 0.2em;
}

.fcont_right p {
    font-size: calc(14px + 1.5 * (100vw - 768px)/432);
    line-height: 140%;
    letter-spacing: 3px;
}

.fcont_right  .tel {
    font-size: calc(18px + 1.5 * (100vw - 768px)/432);
	font-weight: bold;
}

.fcont_right a {
    font-size: calc(18px + 1.5 * (100vw - 768px)/432);
    border: #FFF solid 2px;
    border-radius: 3px;
    display: block;
    text-align: center;
    padding: 0.3em 0;
    margin: 0.1em 0 0 0;
}


/*サイトマップ*/
.footer_menu ul {
    width: 20%;
    margin-right: 0.8em;
}

.footer_menu ul:last-child {
    margin-right: 0;
}

.footer_menu li:first-child {
    font-size: 18px !important;
    color: #8A153C;
    border-bottom: #8A153C 2px solid;
    margin-bottom: 0.3em;
	margin: 0;
    padding: 0 0 0.1em 0.5em;
}

.footer_menu a {
    display: block;
    color: #000;
    padding: 0.5em 0.5em;
    margin: 0.2em 0;
}

/* -------------------------
  戻るボタン
-------------------------- */
#page_top a{
	width: 60px;
	height: 60px;
}

/* -------------------------
  スライダー
-------------------------- */
.test_slider {
    margin:0 auto;
}

.test_slider img {
    width:60vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}

.test_slider .slick-slide {
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.test_slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}

/*矢印の設定*/
.slick-prev {
	left: 0.8%;
    z-index: 1;
}

.slick-next {
	right: 0.5%;
}

/* -------------------------
  トップ
-------------------------- */
.top section:first-child{
	margin-top:5em;
}

.top section{
	margin-bottom:5em;
}

.top section:last-child{
	margin-bottom:0;
}
/*  ご挨拶  */
.feel .sentence {
    max-width: 770px;
    margin: auto;
}

.feel .sentence p {
    font-size: calc(23px + 0.5 * (100vw - 768px)/432);
    line-height: 160%;
    letter-spacing: 2px;
}

/*  商品紹介  */
.top_pinfo {
    background: rgba(138,21,60,0.6);
    padding: 2em 0;
}

.top_pinfo li {
    width: calc(100% / 4);
}

.top_pinfo p {
    font-size: calc(30px + 0.5 * (100vw - 768px)/432);
}

/*  お知らせ  */
.news_info dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 0 30px 0;
}

.news_info dt,
.news_info dd {
    border-bottom: #8A153C dotted 1.5px;
    padding: 0 0 3px 0;
    margin: 0 0 25px 0;
}

.news_info dt {
    width: 12%;
    text-align: center;
    letter-spacing: 3px;
}

.news_info dd {
    width: 88%;
    letter-spacing: 1px;
}

.news_info p {
    margin: 10px 0 0 0;
    font-size: 14px;
    line-height: 120%;
}

/*  お休みの案内など  */
.event_news {
    /*width: 95%;
    max-width: 1000px;
    margin: 0 auto 30px auto;
    padding: 10px 0 15px 0;*/
    margin: 0 auto 80px auto;
    padding: 10px 0 25px 0;	
    border: #8A153C solid 3px;
}

.event_news div{
    padding: 0 100px;
}

.event_news section{
	margin:8px 0 0 0;
}

.event_news h4 {
    margin: 12px 0 10px 0;
}

.event_news p {
    font-size: calc(18px + 0.5 * (100vw - 768px)/432);
    line-height: 140%;
}

.work span,
.holiday span {
    display: inline-block;
    margin: 0 15px 0 0;
}

.holiday span {
    letter-spacing: 10px;
}

.sub_title {
    font-weight: 600;
}


/* -------------------------
  商品紹介
-------------------------- */
.product section li {
    width:calc(100% / 4.5);
}

.modaal_table {
    margin: 1em 0 0 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px 5px;
}

.modaal_table thead th {
    font-size: calc(30px + 0.5 * (100vw - 768px)/432);
    padding-bottom: 1em;
}

.modaal_table tbody th,
.modaal_table tbody td{
	border-bottom:#ccc 2px solid;
    padding:0.5em;
	text-align:left;
}

.modaal_table tbody tr:first-child th,
.modaal_table tbody tr:first-child td{
	border-top:#ccc 2px solid;
}

.modaal_table tbody th{
	width:25%;
}
.modaal_table tbody td{
	width:75%;
}

.modaal_table .restriction{
    font-size: calc(25px + 0.5 * (100vw - 768px)/432);
	border-top:none !important;
}

.modaal_table tbody td p {
    line-height: 150%;
}

.modaal_table tbody .size2 p{
    margin-bottom: 10px;
    line-height: 100%;	
}

.modaal_table tbody .size2 div{
    margin-bottom: 10px;
}

.modaal_table tbody .size span,
.modaal_table tbody .weight span {
    width: 80px;
    display: inline-block;
}

.modaal_table tbody .size2 span {
    display: block;
}

.modaal_table tbody .size2 li:after {
    content: "、";
}

.modaal_table tbody .size2 li:last-child:after {
    content: "";
}

.modaal_table .title{
	font-size: calc(18px + 0.5 * (100vw - 768px)/432);
}

.modaal-close {
    background: #fff !important;
}

.modaal-close:after,
.modaal-close:before {
    background: #000 !important;
}


.modaal-close:hover:after,
.modaal-close:hover:before {
    background: #b93d0c !important;
}

.yend_gift .keep span,
.yend_gift .allergy span {
    display: inline-block;
    width: 120px;
}


/* -------------------------
  こだわり
-------------------------- */  
.local_images li:nth-child(1),
.local_images li:nth-child(3){
	font-size: calc(50px + 0.5 * (100vw - 768px)/432);
}

.local div img{
	max-width:200px;
}

.succession li{
	width:calc(100%/4.2);
}

/* -------------------------
  作り手の紹介
-------------------------- */
.about table{
    width: 100%;
}

.about table th,
.about table td{
    border-bottom: 1px solid #CCC;
}

.about table tr:first-child th,
.about table tr:first-child td{
    border-top: 1px solid #CCC;
}

.about table th,
.about table td{
    font-size: calc(16px + 1.5 * (100vw - 768px)/432);
    vertical-align: top;
    text-align: left;
    letter-spacing: 3px;
    padding: 20px 0;
}

.about table th{
    width: 35%;
}

.about .small{
	margin-bottom: 10px;
}

.owner p {
    padding: 0 0 15px 0;
}
   
.virus ol {
   margin:0.8em auto;
}

.virus ol li{
	padding:0.5em 0;
	font-size: calc(18px + 1.5 * (100vw - 768px)/432);
}

.parking .title{
   margin:0.8em auto 0.3em 0;
   font-size: calc(18px + 1.5 * (100vw - 768px)/432);
   font-weight:600;
}

/* -------------------------
  商談
-------------------------- */
.online p{
    font-size: calc(16px + 1.5 * (100vw - 768px)/432);
}

.online ol {
	width:97%;
    margin: 0 0 0.3em auto;
}

.online ol li {
    padding: 0 0 0.8em 0;
    font-size: calc(16px + 1.5 * (100vw - 768px)/432);
    line-height: 130%;
}

.meeting table p {
    margin: 0.5em 0;
    letter-spacing: 1px;
}

.meeting .contact_form {
    margin: 3em auto 5em auto !important;
}


/* -------------------------
  お問合せ
-------------------------- */
.contact .contact_form{
    margin-bottom: 5em;
}

.contact table p {
    font-size: 0.5em 0;
    letter-spacing: 1px;
	color:#F00;
	font-weight:600;
}

/* -------------------------
  入力フォーム
-------------------------- */
/*案内　必要事項　内容の確認　送信完了*/
.process {
    width: 85%;
    font-size: calc(16px + 1.5 * (100vw - 768px)/432);
    margin: 50px auto 15px auto;
}

.process  li{
    margin: 0 30px 10px 0;
}

.process li:after {
    margin-left: 60px;
}

.process li span{
    border: 3px solid #FFF;
}

.disp {
    border: 3px solid #8A153C !important;
}

/*入力フォーム*/
.contact_form table th,
.contact_button,
.check_form table th,
.check_form table td,
.check_form ul input,
.form {
    font-size: calc(16px + 1.5 * (100vw - 768px)/432);
}

.check_form table p,
.comp_button a {
    font-size: calc(14px + 0.5 * (100vw - 768px)/432);
	margin-top:0.5em;
}

.contact_form table th,
.check_form table th{
    letter-spacing: 3px;
}

.contact_form table th{
    padding: 20px 30px 0 25px;
    width: 20%;
}

.check_form table th {
    padding: 10px 30px 0 25px;
    width: 25%;
}

.check_form table td, 
.contact_form table td{
    padding: 12px 0 10px 0;
}

.textarea{
    height: 300px;
}

.contact_button,
.check_form ul input,
.comp_button a{
    border: 3px solid #FFF;
	border-radius: 30px;
}

.check_form ul{
	margin-top:4em;
}

.check_form ul input{
	padding:0.5em 1em;
	margin:0 0.5em;
}

.contact_button:hover,
.check_form ul input:hover,
.comp_button a:hover{
    border: 3px solid #8A153C;
}

/* エラー */
.error .error_messege{
	font-size:20px;
	letter-spacing:3px
}

.error .back-button{
        font-size:calc(16px + 1.5 * (100vw - 768px)/432)
}

/* -------------------------
  サイトポリシー
  プライバシーポリシー
-------------------------- */
.other .sentence ul {
    width: 97%;
}

.other .sentence li {
    line-height: 160%;
}

.other table td{
    font-size: calc(18px + 2.5 * (100vw - 768px)/432);
	vertical-align: middle;
}

.other_button{
    background:#8A153C;
    color:#FFF;
    border: 3px solid #FFF;
    font-size: calc(18px + 2.5 * (100vw - 768px)/432);
	letter-spacing:2px;
    padding: 8px 30px;
}

.other_button:hover{
    background:#FFF;
    color:#8A153C;
    border: 3px solid #8A153C;
}

/* -------------------------
  過去の更新情報
-------------------------- */
/*アコーディオンタイトル*/
.years {
    font-size:1rem;
    padding: 2% 3% 2% 0;
}

/*アイコンの＋と×*/
.years::before,
.years::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;
    
}
.years::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    
}
.years::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.years.pclose::before{
	transform: rotate(45deg);
}

.years.pclose::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
	margin:0 5% 3% 5%;
}

.past_info dl {
    display: flex;
	flex-wrap: wrap;
    width: 100%;
}

.past_info dt,
.past_info dd {
    border-bottom: #8A153C dotted 1.5px;
	padding: 0 0 3px 0;
    margin: 0 0 25px 0;
}

.past_info dt {
    width: 12%;
    text-align: center;
    letter-spacing: 3px;
}

.past_info dd {
    width: 88%;
    letter-spacing: 1px;
}

.past_info p {
    margin: 10px 0 0 0;
    font-size: 14px;
    line-height: 120%;
}

}