@charset "utf-8";
/*---------------------------------------------
COOKING CLASS
-----------------------------------------------
テーマヘッダー
(header.php)内に記述
----------------------------------------------*/

/*********************************************
ヘッダー下info
*********************************************/
.page-id-80 .p-page-header,
.page-id-500 .p-page-header {
margin-bottom: 0;
}

.page-id-80 #header_text,
.page-id-500 #header_text {
background: #829D5B;
margin-bottom: 60px;
text-align: center;
}

.page-id-80 #header_text p,
.page-id-500 #header_text p {
color: #F6F1EE;
margin-bottom: 0!important;
padding: 4px;
}

.page-id-80 #header_text p span,
.page-id-500 #header_text p span {
color: #F6F1EE;
margin-right: 10px;
}

/*********************************************
バナー（figureタグ）
*********************************************/
.read figure{
margin: 0 auto 50px;
max-width: 640px;
}

.read figure figcaption{
background: #C6DDEA;
font-size: 95%;
line-height: 170%;
padding: 1.5em;
text-align: left;
}

/*********************************************
ボタン
*********************************************/
/* カラー変数の定義 */
.page-id-80,
.page-id-500 {
    --button-bg-color: #F15025;
    --button-text-color: #F6F1EE;
    --button-hover-bg-color: #fff;
    --button-hover-text-color: #F15025;
}

/* ボタンのスタイリング */
.page-id-80 .btn_cont,
.page-id-500 .btn_cont {
    display: flex;
    justify-content: center;
    width: 100%;
}

.page-id-80 a.btn_44,
.page-id-500 a.btn_44 {
    background-color: var(--button-bg-color) !important;
    border: 1px solid var(--button-bg-color) !important;
    border-radius: 4px;
    color: var(--button-text-color);
    display: inline-block;
    font-weight: bold;
    margin: auto;
    overflow: hidden;
    padding: 1rem 3em;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease-in;
    vertical-align: middle;
    width: 360px;
    z-index: 1;
}

.page-id-80 a.btn_44:before,
.page-id-500 a.btn_44:before {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    content: "";
    display: block;
    height: 180%;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    width: 140%;
    z-index: -1;
}

.page-id-80 a.btn_44:after,
.page-id-500 a.btn_44:after {
    background-color: var(--button-bg-color);
    border-radius: 50%;
    content: "";
    display: block;
    height: 190%;
    left: 55%;
    position: absolute;
    top: 180%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    width: 160%;
    z-index: -1;
}

.page-id-80 a.btn_44:hover,
.page-id-500 a.btn_44:hover {
    border: 1px solid var(--button-bg-color);
    color: var(--button-hover-text-color) !important;
}

.page-id-80 a.btn_44:hover:before,
.page-id-80 a.btn_44:hover:after,
.page-id-500 a.btn_44:hover:before,
.page-id-500 a.btn_44:hover:after {
    background-color: var(--button-hover-bg-color) !important;
}

.page-id-80 a.btn_44:hover:before,
.page-id-500 a.btn_44:hover:before {
    top: -35%;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.page-id-80 a.btn_44:hover:after,
.page-id-500 a.btn_44:hover:after {
    top: -45%;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

/*********************************************
コンセプト
*********************************************/
.page-id-80 .concept div.conceptBox,
.page-id-500 .concept div.conceptBox {
background: #4B4A4A;
padding: 2.5em;
text-align: center;
}

.page-id-80 .concept figure,
.page-id-500 .concept figure {
background: #4B4A4A;
}

.page-id-80 .concept div h3,
.page-id-80 .concept div p,
.page-id-500 .concept div h3,
.page-id-500 .concept div p {
color: #fff;
}

.page-id-80 .concept div p,
.page-id-500 .concept div p {
margin-bottom: 1em;
}

.page-id-80 .concept div h3,
.page-id-500 .concept div h3 {
font-size: 36px;
}

@media screen and (max-width: 768px){
.page-id-80 .concept div h3,
.page-id-500 .concept div h3 {
font-size: 20px;
}
}

.page-id-80 .concept div.conceptBox2,
.page-id-500 .concept div.conceptBox2 {
background: #EFEFEF;
padding: 2.5em;
}

.page-id-80 .concept div.conceptBox2 p,
.page-id-500 .concept div.conceptBox2 p {
color: #000;
margin-bottom: 0;
}

/*********************************************
ミッション
*********************************************/
.page-id-80 .mission .img_style_1,
.page-id-500 .mission .img_style_1 {
border-radius: 0!important;
margin-bottom: 0;
width: auto!important;
}

.page-id-80 .mission .mission_box,
.page-id-500 .mission .mission_box {
background: #efefef;
}

/* ベーススタイル */
.page-id-80 .mission,
.page-id-500 .mission {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.page-id-80 .mission_box,
.page-id-500 .mission_box {
width: 100%;
margin-bottom: 30px;
}

/* PC用の画像を表示、SP用の画像を非表示 */
.page-id-80 .mission_box .pc,
.page-id-500 .mission_box .pc {
display: block;
}

.page-id-80 .mission_box .sp,
.page-id-500 .mission_box .sp {
display: none;
}

/* 画像のスタイル */
.page-id-80 .img_style_1,
.page-id-500 .img_style_1 {
width: 100%;
height: auto;
}

/* h3のスタイル（共通部分） */
.page-id-80 .mission_box h3,
.page-id-500 .mission_box h3 {
background-color: #829D5B;
color: white;
margin-top: 0!important;
margin-bottom: 0!important;
padding: 0.7em!important;
text-align: center;
}

.page-id-80 .mission_box p,
.page-id-500 .mission_box p {
line-height: 1.6;
margin-bottom: 0;
padding: 30px;
}

/* タブレット以上のサイズ（768px以上）の場合 */
@media (min-width: 768px) {
.page-id-80 .mission_box,
.page-id-500 .mission_box {
width: calc(50% - 25px); /* 50%幅で、間に50pxの間隔 */
}

.page-id-80 .mission_box h3,
.page-id-500 .mission_box h3 {
font-size: 20px;
}
}