@charset "UTF-8";
/* CSS Document */
/* 打消し用 */

input {
  -webkit-appearance: none; }
.row {
    margin-right: 0px;
    margin-left: 0px;
}
p {
    margin: 0;
    font-size: 16px;
    color: #333;
    line-height: 1.8em; }
a {
  color: #E91E63;
  text-decoration: none; }

a:hover {
  color: #ff2e00;
  text-decoration: none; }

/* 画像 */
img {
  vertical-align: middle;
  width: 100%; }

/*-------------------
	全体の設定
-------------------*/
body {
  color: #1C1C1C;
  letter-spacing: 0.05em;
  background:#003399;
}
.text_b {
  font-weight: 700; }

.text_blue {
  color: #3498db !important; }

.text_red {
  color: #E91E63 !important; }

.text_bbg {
  font-size: 18px; }

.text_bg {
  font-size: 16px; }

.text_md {
  font-size: 14px; }

.center {
  text-align: center; }

.margin-btmsm {
  margin-bottom: 10px; }
  
.margin-btm {
  margin-bottom: 20px; }

.margin-btmbg {
  margin-bottom: 40px; }
  
.margin-btmsp {
  margin-bottom: 80px; }


.column {
  margin-bottom: 140px !important; }
  

/************************************

	 
	 
************************************/

/*ひとくくりのboxの余白調整*/
.con_padding {
  padding: 60px 20px; }

/*woomyのロゴ*/
.navbar-brand {
  font-weight: bold; }

.login_box {
  float: right; }

.btn-blue{
  color: #fff;
  background-color: #00aaff;
  margin: 8px;
}
.btn-blue:hover{
  color: #fff;
  background-color: #00aaff;
}


/*見出し*/
.post_content{
    margin-left: -16px;
	border-left: solid 6px #3498db;
    padding: .5em 0 .5em 16px;
	line-height:1.5em;
}

/*キャプション*/
.caption_box{
    border: 1px solid #f59b5f;
    background-color: #fff8eb;
    padding: 3em;
    position: relative;
}

.caption_title{
    font-size: .85em;
    max-width: 100%;
    min-width: 2em;
    overflow: hidden;
    padding: .25em 1em;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #f59b5f;
    color: #fff;
    font-weight: bold;
}

.rounded{
	color: #fff;
	font-weight: bold;
	font-size: 24px;
	line-height: 2em;
}
.rounded span{
	background: #ffffff;
	padding: 0 10px;
	font-size: 30px;
}

h4 {
  line-height: 1.5em;
  font-size: 24px;
  color: #333;
  margin: 10px 0;
  position: relative; }

/*インスタグラマーのアイコン*/
.user_icon_box {
  padding: 0 10px; }

.user_icon_inner {
  margin: 20px auto; }

.inner_image {
  overflow: hidden;
  border-radius: 150px;
  height: 150px;
  width: 150px;
  margin: 0 auto; }


/*補足*/

.point_gray {
    padding:60px;
    width: 100%;
    background: #f3f3f3;}

/*送信ボタン*/


/* トップのふきだし */
.balloon_und {
  display: inline-block;
  font-weight: bold;
  color: #333;
  background: #fff;
  border: solid 3px #333;
  padding: 20px 22px;
  position: relative;
}
.balloon_und::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 15px;
  background: #fff;
  bottom: -10px;
  left: 0;
  right: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 1;
  margin: auto;
}
.balloon_und::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 15px;
  background: #333;
  bottom: -15px;
  left: 0;
  right: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin: auto;
}




/* インスタグラマー報酬の相場がわからない！！ */
.balloon_left {
    width: 100%;
    display: flex;
    align-items: start;
    gap: 2rem;
}
.balloon__txt {
    position: relative;
    max-width: 600px;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background: #fff;
    flex: 1;
}
.balloon__txt::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 0.8rem solid transparent;
    top: 1rem;
    left: -1.5rem;
    border-right-color: #fff;
}





/* その他のPRにおける重要な点について */
.accordion-button{
	padding: 1em;
	font-size: 18px;
	line-height: 1.4em;
}
.accordion-button .bi{
    padding-right: 10px;
}
.accordion-body{
	padding: 2em;
	font-size: 0.9em;
}






/* インスタグラマーを使ったPRにおいて効果が出やすい商材を考える！ */
.last_midashi {
    position: relative;
    padding: 1rem;
    border-radius: 10px;
    border: 3px solid #333;
    transform: perspective(1000px) rotateX(20deg);
    box-shadow: 0px 10px 0px #333;
    background-color: #fff;
    color: #333;
    font-weight: bold;
    font-size: 18px;
}

.last_midashi:before {
    position: absolute;
    top: 100%;
    left: 50px;
    transform: skew(-25deg);
    height: 25px;
    width: 15px;
    border-right: 13px solid #333;
    background-color: #fff;
    content: "";
}

.last_midashi p {
    line-height: 1.5;
	font-size:1.4em;
}





/* food.php 弊社は、基本的にインスタグラマーを使った～のbox */
.point_top{
    background: #fff;
    max-width: 500px;
    margin: 0 auto;
}



/* food.php フロー */
.stepbar {
  margin: 0 auto;
  font-size: 16px;
}

.stepbar .stepbarwrap {
  margin: 2em 0;
  position: relative;
}

.stepbar .stepbarwrap .steptitle {
  display: inline-flex;
  align-items: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #EF7F42;
  z-index: 2;
}

.stepbar .stepbarwrap .steptitle .stepnum {
  padding-left: 1em;
  font-size: 0.8em;
  color: #EF7F42;
}

.stepbar .stepbarwrap .steptxt {
  padding-left: 2em;
}

.stepbar .stepbarwrap .steptxt .steptxt-title {
  margin: 0.5em 0;
  font-weight: bold;
  font-size: 1.2em;
}

.stepbar .stepbarwrap .steptxt .steptxt-txt {
  font-size: 0.9em;
}

.stepbar .stepbarwrap .stepline {
  width: 1px;
  height: calc(100% + 1em);
  background-color: #EF7F42;
  position: absolute;
  top: 1em;
  left: 0.5em;
  z-index: 1;
}

.stepbarwrap:last-of-type .stepline:last-of-type {
  display: none;
}

@media screen and (max-width: 960px) {
  .stepbar {
    width: 90%;
  }
}


.topbtm{
  display: flex;
  justify-content: center;
  align-items: center;
}

/************************************

	 footer
	 
************************************/
#footer {
  padding: 10px 0;
  width: 100%;
  text-align: center;
  background-color: #000; }

#footer p {
  color: #fff;
  font-size: 14px; }

@media (max-width: 767px) {
	.point_gray{
		padding:20px;
	}
.caption_box {
    padding: 2em;
}