@charset "UTF-8";
/*
	@include sc(pc) {
		width: 100%;
	}
	@include sc(sp) {
		width: 50%;
	}
*/
/*
	@include hover() {
		opacity: 0.6;
	}
*/
/*
	$line:イラレの行の値
	$size:イラレの文字の値

	@include lh(38, 15);
*/
/*
	$size:object-fitの値

	@include objectfit();
	@include objectfit('contain');
*/
/*
	@include taJ();
*/
/*
	@extend %rightarr;
*/
/*
@mixin f_roboto($weight:400) {
	font-family: 'Roboto',"游ゴシック","游ゴシック体","Yu Gothic",YuGothic, sans-serif;
	font-weight:$weight;
}
Robotoフォント設定
400：Regular（デフォルト）
500：Medium
700：Bold
*/
/*
	$weight:フォントの太さ

	@include f_min();
	@include f_min(500);
	@include f_min(600);
*/
/*
	$color:色指定
	$stripe:線サイズ
	$spacing:線の空きサイズ
	$height:太さ

	@include dotted(#e6e1d2, 4,4,2);
*/
/*
example
@include dotted-y(#COLOR, WidthPX,SpaceingPX,LengthPX,); 横破線
@include dotted-y(#e6e1d2, 4,4,2,10);
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Overpass:wght@100;300;400;500;600;700&display=swap");
.Note_Sans_JP {
  font-family: 'Noto Sans JP', sans-serif; }

.Note_Serif_JP {
  font-family: 'Noto Serif JP', serif; }

.zen_kaku_Gothic_New {
  font-family: 'Zen Kaku Gothic New', sans-serif; }

.Overpass {
  font-family: 'Overpass', sans-serif; }

#p_flow {
  width: calc(100% - 20px);
  margin: 0 auto 96px;
  box-sizing: border-box;
  padding: 100px 0 0; }
  @media screen and (max-width: 640px) {
    #p_flow {
      width: 100%;
      margin: 0 auto 12%;
      padding: 14% 0 0; } }
  #p_flow h2 {
    width: 260px;
    margin: 0 auto 64px; }
    #p_flow h2 img {
      width: 100%;
      height: auto; }
    @media screen and (max-width: 640px) {
      #p_flow h2 {
        width: 57.5%;
        margin: 0 auto 8%; } }
  #p_flow .col4 {
    width: 1100px;
    margin: 0 auto 56px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    @media screen and (max-width: 640px) {
      #p_flow .col4 {
        width: 100%;
        display: block; } }
    #p_flow .col4 .col {
      width: 353px;
      border-radius: 6px;
      box-sizing: border-box;
      background-color: #FFF;
      position: relative;
      padding: 32px 56px;
      margin-bottom: 25px;
      border: solid 2px #C8E628; }
      @media screen and (max-width: 640px) {
        #p_flow .col4 .col {
          width: 84%;
          margin: 0 auto 3%;
          position: relative;
          padding: 5% 5%; } }
      #p_flow .col4 .col:after {
        content: '';
        width: 41px;
        height: 41px;
        background-image: url("../../common/img/flow_arrow.png");
        background-repeat: no-repeat;
        background-size: 41px 41px;
        background-position: center center;
        position: absolute;
        right: -30px;
        top: calc(50% - 20px);
        z-index: 10; }
        @media screen and (max-width: 640px) {
          #p_flow .col4 .col:after {
            right: calc(50% - 20.5px);
            top: auto;
            bottom: -30px;
            transform: rotate(90deg); } }
      #p_flow .col4 .col:last-child:after {
        content: none; }
      #p_flow .col4 .col .num {
        width: 50px;
        height: 50px;
        margin: 0 auto 24px; }
        #p_flow .col4 .col .num img {
          width: auto;
          height: 100%;
          margin: 0 auto; }
        @media screen and (max-width: 640px) {
          #p_flow .col4 .col .num {
            position: absolute;
            left: 5%;
            top: 8%; } }
      #p_flow .col4 .col h3 {
        font-family: 'Zen Kaku Gothic New', sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: #333333;
        text-align: center;
        margin-bottom: 24px; }
        @media screen and (max-width: 640px) {
          #p_flow .col4 .col h3 {
            font-size: 4.8vw;
            text-align: left;
            padding: 5% 0 0 45px;
            margin-bottom: 4%; } }
        #p_flow .col4 .col h3 span {
          padding: 0 8px 4px;
          position: relative; }
          #p_flow .col4 .col h3 span:after {
            content: '';
            width: 100%;
            height: 2px;
            background-color: #C8E628;
            position: absolute;
            left: 0;
            bottom: 0; }
      #p_flow .col4 .col p {
        font-size: 16px;
        color: #333; }
        @media screen and (max-width: 640px) {
          #p_flow .col4 .col p {
            font-size: 3.6vw; } }
        #p_flow .col4 .col p .flow05_img {
          width: 100%;
          margin: 16px auto -16px; }
  #p_flow .precautions {
    width: 860px;
    margin: 0 auto 0;
    border-radius: 6px;
    background-color: #FFF;
    color: #333333;
    box-sizing: border-box;
    padding: 40px 60px; }
    @media screen and (max-width: 640px) {
      #p_flow .precautions {
        width: 84%;
        padding: 10% 4%; } }
    #p_flow .precautions h2 {
      width: 100%;
      font-family: 'Zen Kaku Gothic New', sans-serif;
      font-size: 18px;
      font-weight: 700;
      text-align: left;
      margin: 0 0 24px;
      padding: 0; }
      @media screen and (max-width: 640px) {
        #p_flow .precautions h2 {
          font-size: 4.2vw;
          margin: 0 0 3%; } }
    #p_flow .precautions .col2 {
      width: 100%;
      margin: 0 auto 0;
      display: block; }
      @media screen and (max-width: 640px) {
        #p_flow .precautions .col2 {
          display: block; } }
      #p_flow .precautions .col2 .col {
        width: 100%;
        margin: 0 0 32px; }
        #p_flow .precautions .col2 .col:last-child {
          margin-bottom: 0; }
        @media screen and (max-width: 640px) {
          #p_flow .precautions .col2 .col {
            width: 100%; }
            #p_flow .precautions .col2 .col:nth-child(2) {
              width: 100%; } }
        #p_flow .precautions .col2 .col h3 {
          font-family: 'Zen Kaku Gothic New', sans-serif;
          font-size: 16px;
          font-weight: 700;
          margin: 0 0 8px;
          padding: 0; }
          @media screen and (max-width: 640px) {
            #p_flow .precautions .col2 .col h3 {
              font-size: 4vw; } }
        #p_flow .precautions .col2 .col ul {
          font-family: 'Zen Kaku Gothic New', sans-serif;
          font-size: 14px;
          font-weight: 500;
          padding: 0 0 0 1em; }
          @media screen and (max-width: 640px) {
            #p_flow .precautions .col2 .col ul {
              font-size: 3.6vw;
              margin-bottom: 5%;
              padding: 0; } }
          #p_flow .precautions .col2 .col ul li {
            margin: 0 0 0;
            padding: 0 0 0 1em;
            letter-spacing: 0;
            line-height: 1.8;
            position: relative; }
            #p_flow .precautions .col2 .col ul li:before {
              content: '・';
              position: absolute;
              left: 0;
              top: 0; }
            #p_flow .precautions .col2 .col ul li a {
              text-decoration: underline; }
        #p_flow .precautions .col2 .col .tel_num {
          font-size: 28px;
          font-weight: 500;
          color: #28648C;
          padding-left: 1em; }
          @media screen and (max-width: 640px) {
            #p_flow .precautions .col2 .col .tel_num {
              padding-left: 0.5em; } }

#p_flow .precautions .col2 .text{
  font-size: 14px;
  padding: 0 0 0.4em 1em;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
}
@media screen and (max-width: 640px) {
  #p_flow .precautions .col2 .text{
    font-size: 3.6vw;
    padding: 0 0 0.4em 0;
  }
}

/*# sourceMappingURL=flow.css.map */