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

/*------------------------
destyle
--------------------------*/
* {
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

p,
table,
figure,
ul,
 {
  margin: 0;
}



/*------------------------
　pet-wrapper
--------------------------*/

.pet-wrapper {
max-width: 1400px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	display: block;
	background-color: #fff;
/*	position: relative;*/
/*	width: 100%;*/
	font-size: 62.5%;
	font-size: 1.3rem;
	color: #000;
	font-family: "Noto Sans JP",
	"Helvetica Neue",
	Arial,
	"Hiragino Kaku Gothic ProN",
	"Hiragino Sans",
	Meiryo,
	sans-serif;
}

.pet-wrapper img {
	height: auto;
}
.pet-wrapper a:link {
/*	color:#000;*/
	text-decoration: none;
	outline: none;
}	
.pet-wrapper  a:visited {
/*	color:#000;*/
	text-decoration: none;
	outline: none;
}
.pet-wrapper a:hover{
	text-decoration: none;
	outline: none;
}
.pet-wrapper a:focus {
	color:#FF0000;
	text-decoration: none;
	outline: none;
}

/*------------------------
　共通
--------------------------*/

.p_large {
	font-size: 2.5rem;
	font-weight:bolder;
	line-height: 1.8;
	margin-bottom: 20px;
}

.p_large2 {
	font-size: 2.0rem;
	font-weight:bolder;
	line-height: 1.8;
	margin-bottom: 20px;
	margin-top: 20px;
	color: #0033cc;
}

.p_medium {
	font-size: 2rem;
	font-weight:bolder;
	line-height: 1.5;
	margin-bottom: 10px;
}

.p_small {
	font-size: 1.6rem;
	font-weight:normal;
	line-height: 1.5;
	margin-bottom: 5px;
}

.p_ss {
	font-size: 1.3rem;
	font-weight:normal;
	line-height: 2;
	margin-bottom: 5px;
}

.p_time {
	font-size: 1.8rem;
	font-weight:bolder;
	line-height: 1.5;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin: 10px;
	padding: 10px;
    background: #fffffff;
}

.p_button {
	font-size: 1.8rem;
	font-weight:bolder;
	line-height: 1.8;
}

.font_blue {
	color: #000000;
/*    黒に変更*/
}

/* マーカー線*/
.markerred{
 background:linear-gradient(transparent 75%, #69b6e7 75%);
font-weight:bold; 
}

.markeryellow{
background: linear-gradient(transparent 75%, #61c9e3 75%);
}

.markergray{
background:linear-gradient(transparent 75%, #dddddd 75%);
}


/*------------------------
　divのクラス
--------------------------*/

.pet_youtube {
    margin: 30px 0;
}

.beginning {
	margin-bottom: 20px;
}

.beginning img {
	width: 400px;
}

.pet-category {
	display: flex;
	justify-content: center;
	padding-left: 0;
	list-style: none;
	overflow: hidden;
	margin: 0px;
}

.pet-category li{
	text-align: center;
	float: left;
	padding: 10px;
	margin: 3px;
}

.pet-category ul a {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	padding: 20px;
}

.profile {
	width: 100%;
	margin: 20px 0;
	padding: 20px;
	background-color: #ffdae4;
}

.profile_img {
	width: 300px;
    display: inline-block;  /* インラインブロック化 */
    vertical-align: middle; /* 高さを中央に揃える */
    padding: 8px;  /* 白枠の太さ */
    background-color: #FFFFFF;
    box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.8);
	margin-bottom: 15px;
}
.profile_txt {
	width: 300px;
	text-align: left;
    display: inline-block;  /* インラインブロック化 */
    vertical-align: middle; /* 高さを中央に揃える */
	margin: 0 0 0 20px;
}

.oneday {
	width: 1200px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.oneday table{
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
}

.oneday_img {
	width: 80%;
    display: inline-block;  /* インラインブロック化 */
    vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.oneday_txt {
	width: 70%;
    display: inline-block;  /* インラインブロック化 */
    vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.pickup {
	width: 100%;
	margin: 20px 0;
	padding: 20px;
	background-color: #ccf5ff;
}

.pickup_top {
	width: 100%;
	margin: 20px 0;
	padding: 0px;
	background-color: #ccf5ff;
}

.pickup_img {
	width: 300px;
    display: inline-block;  /* インラインブロック化 */
    vertical-align: middle; /* 高さを中央に揃える */
	margin-bottom: 15px;
	padding: 0px;
}


.pickup_txt {
	width: 400px;
	text-align: left;
	line-height: 1.5;
    display: inline-block;  /* インラインブロック化 */
    vertical-align: middle; /* 高さを中央に揃える */
	margin: 0 0 0 20px;
}
.pickup table{
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
border-collapse:separate;  /* セル同士の間隔 */
border-spacing:10px;  /* セル同士の間隔 */
}

.pickup table td img{
	width: 100%;
}



/*------------------------
　装飾　リボン
--------------------------*/

.oneday_title {
  font-size: 1.6em;
  font-weight: bold;
  color: #000000;/*文字色*/
  /*線の種類（点線）1.5px 線色*/
  border-bottom: dashed 1.5px #9ebac1;
}



.title_ribon1 {
  display: inline-block;
  position: relative;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 7px 0;
  font-size: 18px;/*フォントサイズ*/
  background: #78d0f5;/*背景色*/
  color: #FFF;/*文字色*/
  box-sizing: border-box;
  margin: 20px 0 0;
}

.title_ribon1 p {
  font-size: 2rem;
  margin: 0;
  padding: 0 30px;
  border-top: dashed 1px #FFF;/*上の破線*/
  border-bottom: dashed 1px #FFF;/*下の破線*/
  line-height: 46px;
}

.title_ribon1:before, .title_ribon1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.title_ribon1:before {
  /*左端の山形*/
  top: 0;
  left: 0;
  border-width: 30px 0px 30px 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.title_ribon1:after {
  /*右端の山形*/
  top: 0;
  right: 0;
  border-width: 30px 15px 30px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}




/*------------------------
　光るボタン　PC
--------------------------*/

.GoBtn {
  background-color: #FFF600;
  border-radius: 10px;
  padding: 15px;
  font-size: 1.5em;
	text-align: center;
	margin: 5% 10%;
}
.GoBtn a {
  color: #8a5e00;
  font-weight: bold;
}

.GoBtn a:hover,
.GoBtn a:active {
  color: #8a5e00;
}
.shiny-btn1 {
    display: block;
    position: relative;
    width: 80%;/*ボタンの幅*/
    padding: 10px 0;
    margin: 30px auto;
    background-color: #FFF600;/*ボタンの色*/
    box-shadow: 0 3px 0 0 rgba(251, 168, 13, 1);/*影の色(rgbaの値を変更)*/
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
}
.shiny-btn1:hover {
    text-decoration: none;
    color: #fff;
}
.shiny-btn1::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}

@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
.nonepc {display: none}
.nonesp {display: block}




/*------------------------
    スマホ対応
--------------------------*/

@media only screen and (max-width: 780px) {
body {
	font-size: 1.2rem;
	line-height: 1.4;
}

.beginning img {
	width: 200px;
}

.p_large {
	font-size: 1.8rem;
	font-weight:bolder;
	line-height: 1.8;
	margin-bottom: 10px;
}
.p_medium {
	font-size: 1.4rem;
	font-weight:bolder;
	line-height: 1.5;
	margin-bottom: 8px;
}

.p_small {
	font-size: 1.2rem;
	font-weight:normal;
	line-height: 1.5;
	margin-bottom: 3px;
}

.p_ss {
	font-size: 1rem;
	font-weight:normal;
	line-height: 1.5;
	margin-bottom: 5px;
}

.p_time {
	font-size: 1.3rem;
	font-weight:bolder;
	line-height: 1.5;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin: 10px;
	padding: 10px;
    background: #fffffff;
}

.p_button {
	font-size: 1.6rem;
	font-weight:bolder;
	line-height: 1.8;
}

.pet-wrapper {
	width: 100%;
}

.pet-category li a {
	font-size: 1rem;
	padding: 5px;
}

.profile_img {
	width: 100%;
	padding: 10px;
    display: inline-block;  /* インラインブロック化 */
    vertical-align: middle; /* 高さを中央に揃える */
    padding: 6px;  /* 白枠の太さ */
    background-color: #FFFFFF;
    box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.8);
	margin-bottom: 15px;
}
.profile_txt {
	width: 100%;
	padding: 10px;
	text-align: left;
    display: inline-block;  /* インラインブロック化 */
    vertical-align: middle; /* 高さを中央に揃える */
	margin: 0px;
}

.pickup table{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
border-collapse:separate;  /* セル同士の間隔 */
border-spacing:10px;  /* セル同士の間隔 */
}

.pickup table td img{
	width: 100%;
}

/*.pickup_top {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}*/



.profile_img {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
    display: inline-block;  /* インラインブロック化 */
    vertical-align: middle; /* 高さを中央に揃える */
    padding: 6px;  /* 白枠の太さ */
    background-color: #FFFFFF;
    box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.8);
	margin-bottom: 15px;
}
.pickup_img {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
    display: inline-block;  /* インラインブロック化 */
    vertical-align: middle; /* 高さを中央に揃える */
}
.pickup_txt {
	width: 100%;
	padding: 10px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	line-height: 1.5;
    display: inline-block;  /* インラインブロック化 */
    vertical-align: middle; /* 高さを中央に揃える */
	margin: 0px;
}

/*------------------------
　光るボタン　SP
--------------------------*/

.GoBtn {
  background-color: #FFF600;
  border-radius: 10px;
  padding: 10px;
  font-size: 1.5em;
	text-align: center;
	margin: 5%;
}
.GoBtn a {
  color: #0033cc;
  font-weight: bold;
}
.shiny-btn1 {
    display: block;
    position: relative;
    width: 80%;/*ボタンの幅*/
    padding: 10px 0;
    margin: 30px auto;
    background-color: #FFF600;/*ボタンの色*/
    box-shadow: 0 3px 0 0 rgba(251, 168, 13, 1);/*影の色(rgbaの値を変更)*/
    border-radius: 5px;
    font-weight: bold;
    font-size: 15px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
}
.shiny-btn1:hover {
    text-decoration: none;
    color: #fff;
}
.shiny-btn1::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
.nonepc {display: none}
.nonesp {display: block}