@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.mb0 { margin-bottom: 0px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }

.mt0 { margin-top: 0px !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }

.mr0 { margin-right: 0px !important; }
.mr5 { margin-right: 5px !important; }
.mr3 { margin-right: 3px !important; }
.mr10 { margin-right: 10px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }
.mr40 { margin-right: 40px !important; }
.mr50 { margin-right: 50px !important; }

.ml0 { margin-left: 0px !important; }
.ml3 { margin-left: 3px !important; }
.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }
.ml40 { margin-left: 40px !important; }
.ml50 { margin-left: 50px !important; }

.bold {
	font-weight: bold;
}

.big {
	font-size: 1.3em;
}

.big2 {
	font-size: 1.1em;
}

.mark_yellow {
	font-weight: 700;
    background: linear-gradient(transparent 20%, #ffffdd 80%);
}

/* セクションの背景 */

.section-full-bgcol-gray {
background: #f7f7f7;
}
.section-full-bgcol-white {
background: #fff;
}
.section-full-bgcol-blue {
background: #eff5ff;
}
.section-full-bgcol-yellow {
background: #fffdf6;
}
.section-full-bgcol-cyan {
background: #e2ecfc;
}
.section-full-headline-title {
	display: block; 
	font-size: 1.5em !important; 
	font-weight: bold !important; 
	color: var(--color_text) !important; 
	background: transparent !important;
	margin-top: 0px !important; 
}

.section-full-headline-title::before {
border-top: none !important;
border-bottom: none !important;
}



.cyan {
color: #00668f;
}

.home-header {
text-align: center;
}


.home-header-ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
 
  /* カード画像（スマホ） */
  .card-left .card-img,
  .card-right .card-img {
    width: 70px;
    height: auto;
    display: block;
  }
  .card-left .card-img {
    transform: rotate(-8deg);
  }
  .card-right .card-img {
    transform: rotate(8deg);
  }
 
  /* 中央テキスト・hikaku画像（スマホ） */
  .center-col {
    text-align: center;
    line-height: 1.4;
  }
  .text-line {
    display: block;
font-weight: bold;
color: var(--color_main);
line-height: 1.6;
font-size: 1.1em;
  }
  .hikaku-img {
    display: block;
    width: 180px;
    height: auto;
    margin: 0 auto;
  }
  .hikaku-text {
    opacity: 0;
    font-size: 0;
    line-height: 0;
    display: block;
  }
 
  /* PC（769px以上） */
  @media (min-width: 769px) {
    .wrap {
      gap: 16px;
    }
    .card-left .card-img,
    .card-right .card-img {
      width: 100px;
    }
    .text-line {
      font-size: 1.3em;
    }
    .hikaku-img {
      width: 300px;
    }
  }




.cyan-cir {
padding: 6px 14px 7px;
width: auto;
margin: 0 auto;
max-width: unset;
text-align: center;
border-radius: 100vh;
background: linear-gradient(90deg, #6cbfac 0%, #00668f 100%);
color: #fff;
font-weight: bold;
}

/* PC（769px以上） */
@media (min-width: 769px) {
.cyan-cir {
max-width: 600px;
}
}

/* ふきだし */
[data-col="gray"] .c-balloon__text {
	background: #f1ecdd;
}
[data-col="gray"] .c-balloon__before {
	border-right-color: #f1ecdd;	
}

/* ランキングボックス */

.rank-box {
margin: 10px auto;
padding: 10px; 
	background: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
	border-radius: 20px; 
}

.rank-box-num {
display: inline-block;
    background: var(--color_main);
    opacity: 0.9;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    padding: 16px 20px;
}

.rank-box-title {
text-align: center;
font-size: 1.5em !important;
margin-bottom: 10px;
}

.rank-box-img {
text-align: center;
margin-bottom: 0px;
}

.rank-box-eval {
text-align: center;
margin-bottom: 20px;
}

.padding20 {
	padding: 20px; 
}