@charset "utf-8";
/* CSS Document */
/*================================================
 *  CSSリセット
 ================================================*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; 
    
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

ul, ol {
  list-style: none; }

li {
  margin: 0;
  padding: 0; }

/*svg {
  fill: currentColor; }*/

img {
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -webkit-touch-callout: none; }

/*================================================
 *  一般・共通設定
 ================================================*/
:root{
    --circleWidth:300px;
    --sectionPadding:150px;
    --btnColor:#ff8a00;
    --h3color:var(--btnColor);    
}

html, body {
  height: 100%;
  font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  color: #303030; }

main {
  display: block; }

div, li, dt, dd, p, span {
  box-sizing: border-box; }

* {
  box-sizing: border-box; }

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

#footer {
  position: relative; }

.image{
    width:100%;
}
.section{
    padding:var(--sectionPadding) 15px;
}
.title{
}
.mv_container{
    padding: 35px 30px 0;
    background:  url("../image/wave01.png") repeat-x bottom,
        url("../image/image_back.jpg") repeat;
}
.main_visual{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1440px;
    margin: auto;
}
.head_title{
    text-align: center;
    font-weight: bold;
    font-size: 24px;
}
.head_title img{
    vertical-align: middle;
}
.head_title_img{
    margin: auto;
    margin-top: 30px;
    max-width: 640px;
}
.description{
	background:
        url("../image/image_back_champuru.jpg") no-repeat top/cover;
	padding-bottom:270px;
}
.description .box-text{
    padding: 0 clamp(1em,6.94vw,100px);
}
.description p{
	font-size: 18px;
	font-weight: bold;
    line-height: 2.5;
}
.description strong{
	font-size: 24px;
    margin-left: 2px;
    margin-right: 2px;
}
.box-ban{
    margin-top: 80px;
}
.box-ban .image{
    display: block;
}
.campaign{
    margin-top: 3em;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #ff4500;
}
.campaign_txt{
    display: flex;
    justify-content: center;
    align-items:flex-end;
}
.campaign .btn{
    margin-top: 1em;
}
.fc-orange{
    color: #ff4500 ;
    /*background: linear-gradient(to bottom,  rgba(255,0,0,1) 0%,rgba(255,140,0,1) 100%);
    -moz-background-clip: text;
    -webkit-background-clip: text;
    background-clip: text;
    -moz-text-fill-color: rgba(255,255,255,0);
    -webkit-text-fill-color: rgba(255,255,255,0);
    text-fill-color: rgba(255,255,255,0);*/
    /*color: transparent;*/
}
.container{
	width: 100%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.main{
	background-image: url("../image/image_repeat.jpg");
	background-repeat: repeat;
	padding: 273px 1.5em 110px;
    position: relative;
}
.top_h2{
	font-size: 48px;
    line-height: 1.0;
}
.top_h2::after{
    content: "";
    height: 10px;
    width: 100%;
    display: block;
    background-color: #fff;
    background-image: radial-gradient(#303030 2px, transparent 3px);
    background-size: 10px 10px;
    background-position: top;
    margin-top: 5px;
}
.top_h2_sub{
	font-size: 27px;
	font-weight: bold;
	display: block;
	margin-top: 10px;
}
.top_h3{
    text-align: center;
}
.top_h3>span{
    display: inline-block;
    padding: 1em 2em;
    background: var(--h3color);
    color: #fff;
    font-size: 30px;
    border-radius: 10px;
    position: relative;
}
.top_h3>span::after{
    content: "";
    width: 0px;
    height: 0px;
    display: inline-block;
    border: var(--arrwidth) solid transparent;
    border-top: 25px solid var(--h3color);
    position: absolute;
    top:100%;
    left: calc(50% - var(--arrwidth));
    --arrwidth:10px;
}
.top_h3 + .box-text{
    margin-top: 0.8em;
}
.circle_position{
    position: absolute;
    width: 100%;
    top:calc(var(--circleWidth) / -2);
    left: 0;
}
.circle{
    position: relative;
    width: var(--circleWidth);
    height: var(--circleWidth);
    border-radius: 50%;
    margin: 0 auto;
    background: #FFFFFF;
    border: 5px solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.boxContainer{
	width: 100%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.boxContainer + .boxContainer{
    margin-top: 120px;
}
.boxContainer .box-text{
    padding: 2em;
    padding-top: 2.5em;
    background: #fff;
    line-height: 2.5;
    /*font-weight: bold;*/
}
.margin-top{
    margin-top: 60px;
}
.recipe-item{
	border: 5px solid #3a3a3a;
	background: #FFFFFF;
	padding: 2em 1.5em;
}
.recipe_img .image{
    display: block;
}
.recipe_name{
	font-size: 18px;
	font-weight: bold;
	display: block;
	margin-top: 24px;
	margin-bottom: 1em;
}
.recipe_dtl_time,.recipe_dtl_vol{
    background: no-repeat center left/contain;
    line-height: 1.87;
    padding-left: 2.5em;
}
.recipe_dtl_time{
    background-image: url(../image/clock.png);
}
.recipe_dtl_time::before{
    content: "調理時間：";
}
#top .recipe_dtl_time{
    line-height: 1.6;
}
.recipe_link{
	display: block;
	text-align: center;
	padding: 20px;
	color: #FFFFFF;
	font-weight: bold;
	border-radius: 10px;
	box-shadow: 0 4px #fed788;
    background: #ff8a00;
    transition: 0.2s;
}
.recipe_link::after{
    content: "";
    width: 27px;
    height: 27px;
    display: inline-block;
    vertical-align: middle;
    background: url("../image/arrow.png") no-repeat center ;
    background-size: 27px;
    margin-left: 1em;
}
.btn:hover{
    opacity: 0.8;
    box-shadow: none;
    transform: translateY(4px);
}
.list-recipe .recipe_link{
    margin-top: 50px;
}
.badge_number{
    display: inline-block;
    color: #ff8a00;
    margin-right:0.2em;
    font-size: 1.4em;
    vertical-align: middle;
}
.foot_share{
	background-color: #FED653;
	background-image: url("../image/wave01.png");
	background-repeat: repeat-x;
	background-position: bottom;
	text-align: center;
	padding-top: 72px;
	padding-bottom: 77px;
}

.share_section{
	height: 37px;
}

.foot_share_list{
	display: flex;
	justify-content: center;
    margin-top: 30px;
}

.foot_share_list li{
	margin: 0 17px;
	width: 75px;
}
.foot_link{
	padding: 75px 10px;
}
.link_section{
	text-align: center;
	margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.foot_link_co{
	text-align: center;
	
}
.btn_link{
	text-align: center;
	color: #fedd74;
	font-size: 21px;
    font-weight: bold;
    line-height: 1.0;
	background-color: #2a48c0;
	border-radius: 20px;
	box-shadow: 0 4px #63a2ff;
	padding: 35px;
    transition: 0.2s;
}
.oyatsu{
    background: #E60012;
    color: #fff;
	box-shadow: 0 4px tomato;
}
.yoko{
    border: 3px solid #3a3a3a;
    background: #FFE592;
    color: #3a3a3a;
    box-shadow: none;
    position: relative;
    padding: 17px 32px ;
    }
.yoko::before,.yoko::after{
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
}
.yoko::before{
    border: 10px solid rgba(255,255,255,0);
    border-top: 20px solid #3a3a3a;
    top: 100%;
    left: calc(50% - 7px);
}
.yoko::after{
    border: 6px solid rgba(255,255,255,0);
    border-top: 13px solid #FFE592;
    top: calc(100% - 1px);
    left: calc(50% - 3px);
}
.sns_youtube{
    background: #E52929;
    color: #fff;
    display: inline-block;
    line-height: 0;
    padding: 8px;
    border-radius: 8px;
}
.foot_link_list{
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.foot_link_list li{
	margin: 0 20px;
	width: 40px;
}
.foot_link_list a:hover{
    opacity: 0.8;
}
.footmenu{
    border-top: solid 3px #999;
    /*text-align: center;*/
    padding: 20px 15px 0;
    background: #003894;
}
.ft_small{
    font-size: 12px;
    color: #fff;
}
.copyright{
    font-size: 1.2rem;
    color: #666;
}
.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
.link_text-sub{
    font-size: 0.8em;
    line-height: 1.8;
    display: block;
}
/*================================================
 *  PC用(769px以上)
 ================================================*/
@media (min-width: 769px) {
    .sp{
        display: none;
    }
    .head_title{
        
    }
    .logo{
        width: 60px;
        height: 60px;
    }
    .main_visual{
        padding-top: min(125px,8.68vw);
        padding-bottom: min(315px,21.88vw);
        position: relative;
    }
    #mv-main{
        position: relative;
        z-index: 1;
        width: 44.44vw;
        max-width: 640px;
    }
    #mv-baby{
        position: absolute;
        width: 20.83vw;
        max-width: 300px;
        left: 4.86vw;
        top:0;
    }
    #mv-onigiri{
        position: absolute;
        width: 27.78vw;
        max-width: 400px;
        left: 13.54vw;
        bottom:50px;
    }
    #mv-soup{
        position: absolute;
        width: 25vw;
        max-width: 360px;
        right: 4.86vw;
        bottom:min(195px,13.54vw);
    }
    .box-ban{
        display: flex;
        justify-content: space-between;
    }
    .box-ban>a:last-of-type{
        margin-right: -35px;
    }
    .list-recipe{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 30px;
    }
    .recipe-item{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }
    .btn_link{
        display: inline-block;
    }
    .foot_link .fl_flex{
        display: flex;
        justify-content: space-around;
    }

}
/*================================================
 *  スマホ用(768px以上)
 ================================================*/
@media (max-width: 768px) {
    :root{
        --sectionPadding:80px;
    }
    .pc{
        display: none;
    }
    .logo{
        width: 45px;
        height: 45px;
    }
    .mv_container{
        padding: 30px 15px 0;
    }
    .title{
        background-image: url("../image/image_top_back_sp.png");
        background-size: 100%;
    }
    .head_title{
    }
    .head_title_img{
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 20px;
    }
    
    .head_title_txt{
        display: inline-block;
    }
    .main_visual{
        flex-wrap: wrap;
        align-items: flex-end;
        padding-bottom: 50px;
    }
    .main_visual .image{
        display: block;
    }
    #mv-main{
        order: 2;
    }
    #mv-baby{
        width: 50%;
        order: 0;
    }
    #mv-onigiri{
        width: 62.8vw;
        order: 3;
        padding-top: 10px;
    }
    #mv-soup{
        width: 50%;
        order: 1;
        padding-bottom: 20px;
    }
    .description .box-ban{
        padding: 0 1em;
    }
    .box-ban a {
        display: block;
    }
    .box-ban a + a{
        margin-top: 1em;
    }
    .top_h3>span{
        width: 100%;
        padding-left: 0.7em;
        padding-right: 0.7em;
        font-size: 20px;
    }
    .list-recipe{
        
    }
    .recipe-item + .recipe-item{
        margin-top: 80px;
    }
    .btn_link{
        display: block;
        font-size: 18px;
    }
    .foot_link_list {
        display: flex;
        justify-content: space-around;
        margin-top: 40px;
    }
    .foot_link_list li {
         margin: auto;
    }
    .foot_link div[class^="foot_link"]{
        margin-top: 50px;
    }

}